Расплывчатость на 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 в сравнении: введите сюда описание изображения


Ответы (0 шт):