Safari浏览器使用3D CSS变换及缩放时出现内容模糊问题

经测试发现，在Safari浏览器中，如果给父元素或子元素设置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)

只要给.scene类或.d1类添加transform: translateZ(0)属性，即可复现该问题。Chrome浏览器不会触发该异常，和Safari的渲染效果存在明显差异。

内容的提问来源于stack exchange，提问作者Сергей Романов