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