我在使用 transform: scale() 放大的元素上显示边框图像切片线时遇到问题,如下所示。这似乎只发生在 Chrome 中。
阅读其他帖子,这似乎是 Chrome 亚像素渲染问题。我试过 [backface-visibility: hidden] 似乎没有帮助。我确实找到的一个解决方案是将 [perspective:1px;] 应用于父元素,并将 [transform: translateZ(0);] 应用于相关元素。虽然这确实消除了线条,但图像变得明显模糊(可能是因为它正在重新转换)。目前使用 translateZ(0) 是解决问题的唯一(或最佳)方法吗?我正在使用 Vanilla 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(/image/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
最佳答案
我能够通过将边框图像转换为 .svg 来部分解决该问题。
这更像是一种变通方法而不是解决方案,但它完全消除了线条并保持图像清晰。 (但是,现在我体验到我认为是一些抗锯齿问题,其中边界线的某些部分会根据比例闪烁进出。)
关于javascript - 比 translateZ(0) 更好的解决方案来解决 Chrome 中的亚像素边框图像缩放问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61693607/