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

http://stackoverflow.com/questions/4641522/how-to-force-re-render-after-a-webkit-3d-transform-in-safari

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:css – 如何在Safari中的WebKit 3D变换后强制重新渲染