У меня проблема с линиями срезов изображения границы, отображаемыми на элементах, которые были увеличены с помощью transform: scale (), как показано ниже. Похоже, это происходит только в Chrome.
Чтение через другие сообщения кажется вероятным, что это проблема рендеринга субпикселей Chrome. Я пробовал [backface-visibility: hidden], который, похоже, не помог. Решение, которое я нашел, заключалось в применении [перспектива: 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(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