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

Question

我在使用 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

标签： javascriptcssgoogle-chrometransformscale

Answer 1

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