比 translateZ(0) 更好的解决方案来解决 Chrome 中的子像素边框图像缩放问题答案

【问题标题】：Better solution than translateZ(0) to sub-pixel border-image scaling issue in Chrome比 translateZ(0) 更好的解决方案来解决 Chrome 中的子像素边框图像缩放问题
【发布时间】：2020-08-24 20:43:24
【问题描述】：

我在使用 transform: scale() 放大的元素上显示边框图像切片线时遇到问题，如下所示。这似乎只发生在 Chrome 中。

阅读其他帖子，这似乎是 Chrome 亚像素渲染问题。我试过 [backface-visibility: hidden] 似乎没有帮助。我确实找到的一个解决方案是将 [perspective:1px;] 应用于父元素，并将 [transform: translateZ(0);] 应用于相关元素。虽然这确实消除了线条，但图像变得明显模糊（可能是因为它正在重新转换）。目前使用 translateZ(0) 是解决问题的唯一（或最佳）方法吗？我正在使用香草 JS。

以下是边框图像 css 的应用方式

#outer {
  height: 200px;
  width: 200px;
  border: 1px solid #333;
  transform: scale(1.22)
}

#tile {
  height: 50%;
  width: 50%;
  position: relative;
  top: 50px;
  left: 50px;
  border: 0px solid transparent;
  border-image-source: url(https://i.stack.imgur.com/Vz5jN.png);
  border-image-slice: 10 fill;
  border-image-width: 10px;
  border-image-outset: 8px 2px 2px 8px;
  box-shadow: 1px 1px 4px #666;
  filter: brightness(30%)
}

<div id="outer">
  <div id='tile'></div>
  </div

【问题讨论】：

分享你正在使用的 png 图片
相关链接：stackoverflow.com/questions/57894977/… 我也对这个问题的解释感兴趣。相关 chrome 问题：bugs.chromium.org/p/chromium/issues/detail?id=600120

标签： javascript css google-chrome transform scale

【解决方案1】：

我能够通过将边框图像转换为 .svg 来部分解决问题。
这更像是一种变通方法而不是解决方案，但它完全消除了线条并保持图像清晰。（但是，现在我体验到了一些抗锯齿问题，其中边界线的某些部分会根据比例闪烁。）

【讨论】：