Better solution than translateZ(0) to sub-pixel border-image scaling issue in Chrome

user_1650399 0
Viewed 621

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.

Border Slices showing when scaled translatZ fix, but blurs everything border-image used

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.

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

transform scale google-chrome css javascript
1 Answers

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.)

user_16503990
Related