使用scale(0.01)缩放父元素时子元素间隙露出父背景如何解决

问题根因 #

对大尺寸元素做高比例缩小的时候，浏览器渲染时的浮点坐标计算会出现精度误差，网格布局的子元素边缘没法完全对齐，微小缝隙就会透出父容器的背景色。

解决方案 #

以下方案都不会影响你用scale优化性能的逻辑，按需选择即可：

• 最简单兜底方案
  直接把父容器的背景色改成和子元素统一的颜色，你的场景是图片拼接的话就改成拼接大图的主背景色，就算有缝隙也完全看不出来，不需要改其他逻辑，零性能损耗。
  代码修改示例：

  .parent {
    /* 原red替换为子元素同色/拼接图背景色 */
    background-color: green;
  }
  

• 优化渲染减少误差
  给子元素开启GPU加速，大幅降低渲染精度偏差的概率，本身还能提升缩放操作的流畅度：
  代码修改示例：

  .parent > * {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  

• 微重叠彻底盖缝
  给子元素加几乎肉眼不可察的放大或者负边距，让相邻元素小幅重叠，完全覆盖缝隙：
  代码修改示例（二选一即可）：

  .parent > * {
    /* 微放大，不会有可见变形 */
    transform: scale(1.001);
    /* 或者负边距 */
    margin: -0.5px;
  }
  

• 保留父容器背景的兼容方案
  如果业务要求父容器必须保留原有背景色，可以给父容器加一层同子元素色的底层伪元素，缝隙只会透出伪元素颜色，不会漏出父容器背景：
  代码修改示例：

  .parent {
    position: relative;
  }
  .parent::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: green;
    z-index: 0;
  }
  .parent > * {
    position: relative;
    z-index: 1;
  }
  

业务场景适配建议 #

你做网格图片拼接缩放的场景，优先选「改父容器背景+开启GPU加速」的组合，不用调整布局逻辑，也不影响性能，绝大多数设备都能解决问题。如果遇到极端场景还有缝隙，再加微放大的配置即可。

内容的提问来源于stack exchange，提问作者vanowm