Расплывчатость на Safari при одновременном применении 3d CSS трансформации и масштабирования
Почему-то, если добавить transform: translateZ(0) для родителя или потомка, то на сафари появляется расплывчатость
<div class="scene"><div class="d1">Test safari scale</div></div>
.scene, .d1
position: absolute
.scene
transform-origin: 0 0
transform: translateX(0px) translateY(0px) scale(20)
.d1
width: 200px
height: 200px
background-color: #d8afaf
border: 2px solid grey
transform: translateZ(0)
Рабочий пример: https://codepen.io/onopich/pen/XWgeGmy
Если добавлять transform: translateZ(0) к .scene или к .d1, то проблема есть. Скриншот на Safari и на Chrome в сравнении:
