css – 如何在Safari中的WebKit 3D变换后强制重新渲染

我使用CSS 3D变换缩放div，例如：

-webkit-transform: scale3d(2,2,1);

缩放本身在任何WebKit浏览器中工作正常。但是，当在Safari(移动或Windows)上使用时，div的内容不会重新呈现。结果是缩放后内容变得模糊。

此效果仅在使用3D变换时发生。一切工作正常使用时

-webkit-transform：scale(2);.

为了利用iPhone / iPad上的硬件加速，使用3D转换是很好的。

有人知道如何告诉Safari重新渲染一个div与新的比例？

解决方法

文本模糊的原因是因为Webkit将文本视为图像，我想这是硬件加速的代价。我假设你使用过渡或动画关键帧在你的ui，否则性能增益可以忽略不计，你应该切换到非3d变换。

您可以：

•为transitionend添加事件监听器，然后替换标准变换的3d变换，例如…

element.addEventListener("transitionend",function() {
  element.style.webkitTransform = 'scale(2,2)'
},false);

•由于Webkit将内容作为图像处理，因此最好开始大和缩小。所以，你的css写在你的“结束状态”，并缩小为正常状态…

#div {
  width: 200px; /*double of what you really need*/
  height: 200px; /*double of what you really need*/
  webkit-transform: scale3d(0.5,0.5,1);
}

 #div:hover {
  webkit-transform: scale3d(1,1,1);
}

你会得到一个松脆的文本悬停。我在这里做了一个演示(在iOS上也工作)：

http://duopixel.com/stack/scale.html