Chrome下transform:scale()引发border-image切片线问题的更优替代方案

这个Chrome特有的border-image亚像素渲染bug我也碰到过好几次，translateZ(0)确实不是唯一的解决方案，而且它带来的模糊问题确实挺闹心的。下面给你几个更友好的替代思路：

1. 微调border-image-slice的数值 #

Chrome的亚像素渲染问题往往出现在切片值刚好对齐像素边界的时候，你可以尝试给slice值加一个极小的小数偏移，比如把原来的：

border-image-slice: 10 fill;

改成：

border-image-slice: 10.01 fill;

这个微小的偏移能让浏览器的渲染引擎避开精确的像素对齐，从而隐藏切片线，而且完全不会影响视觉效果，是最简单的尝试方向。

2. 用zoom替代transform:scale() #

如果你的布局允许，可以把父元素的transform: scale(1.22)换成Chrome支持的非标准属性zoom: 1.22。zoom的渲染逻辑和transform不同，它不会触发硬件加速的纹理缩放，也就不会出现border-image的切片线问题，同时也不会导致元素模糊。

注意：zoom会影响元素的实际布局尺寸（类似scale的布局缩放），而transform是视觉上的缩放不影响布局，所以需要根据你的场景测试是否适用。

3. 用background-image模拟border-image效果 #

border-image的渲染逻辑在Chrome的亚像素处理上确实有缺陷，你可以改用多背景图的方式手动模拟border-image的效果，这种方式的渲染稳定性更高。

比如把#tile的border-image相关代码替换成：

#tile {
  height: 50%;
  width: 50%;
  position: relative;
  top: 50px;
  left: 50px;
  padding: 10px; /* 对应原来的border-image-width */
  box-sizing: border-box;
  background-image: url(https://i.sstatic.net/Vz5jN.png);
  background-repeat: repeat;
  background-size: calc(100% - 20px) calc(100% - 20px); /* 减去padding的两倍 */
  background-position: center;
  box-shadow: 1px 1px 4px #666;
  filter: brightness(30%);
}

这种方式通过padding和background的组合来实现类似border-image的切片填充，缩放时不会出现切片线，而且完全不会模糊。

4. 极小值的filter模糊（妥协方案） #

如果上面的方法都不适用，可以尝试给#tile添加一个极小的模糊滤镜，触发Chrome的重新渲染但不会明显影响视觉：

#tile {
  /* 其他样式不变 */
  filter: brightness(30%) blur(0.05px);
}

这个模糊值非常小，肉眼几乎察觉不到，但能让Chrome重新处理元素的渲染，从而隐藏切片线，比translateZ(0)的模糊程度轻很多。

为什么translateZ(0)会导致模糊？ #

当你设置transform: translateZ(0)时，Chrome会把该元素放入GPU的纹理中进行硬件加速渲染。如果元素的缩放比例不是整数倍，GPU会对纹理进行插值缩放，导致图片出现模糊。而上面的方案要么避开了硬件加速，要么通过更稳定的渲染逻辑避免了这个问题。

你可以根据自己的布局复杂度和视觉需求选择最适合的方案，优先尝试第1和第2种，代码改动最小；如果需要更高的稳定性，第3种是最可靠的。

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