我使用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上也工作)：
