比Chrome更好的解决方案(translateZ(0))解决亚像素边框图像缩放问题 [英] Better solution than translateZ(0) to sub-pixel border-image scaling issue in Chrome

问题描述

我有一个问题，边界图像切片线显示在使用transform:scale()进行了缩放的元素上，如下所示.这似乎仅在Chrome中发生.

I am having an issue with the border-image slice lines showing up on elements that have been scaled up using transform: scale() as shown below. This appears to only happen in Chrome.

通读其他帖子，看来这可能是Chrome的亚像素渲染问题.我尝试了[背面可见性:隐藏]，但似乎无济于事.我确实找到了一个解决方案，将[perspective:1px;]应用于父元素，并将[transform:translateZ(0);]应用于相关元素.尽管这样做确实消除了线条，但是图像变得明显模糊(大概是因为它正在重新转换).目前是否使用translateZ(0)是解决问题的唯一(或最佳)方法?我正在使用香草JS.

Reading through other posts it seems likely this is a Chrome sub-pixel rendering issue. I have tried [backface-visibility: hidden] which did not seem to help. A solution I did find was applying [perspective:1px;] to the parent and [transform: translateZ(0);] to the element in question. While this does remove the lines, the image gets noticeably blurry(presumably because it is being re-transformed). Is using translateZ(0) currently the only (or best) way to solve the issue? I am using vanilla JS.

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

Below is how the border-image css is being applied

#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

推荐答案

我能够通过将边界图像转换为.svg来部分解决该问题.
这比解决方案更多是一种解决方法，但是它可以完全消除线条并保持图像清晰.(但是，我现在遇到的是一些抗锯齿问题，其中边界线的某些部分会根据比例尺而闪烁进出.)

I was able to partially solve the issue by converting the border-image to a .svg.
This is more of a workaround than a solution, but it removes the lines completely and keeps the images sharp. (However, now I am experience what I assume are some anti-aliasing issues where some parts of the border lines will flicker in and out depending on the scale.)

这篇关于比Chrome更好的解决方案(translateZ(0))解决亚像素边框图像缩放问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！