如何在Safari中进行WebKit 3D变换后强制重新渲染

Question

我正在使用CSS 3D转换来缩放div,例如:

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

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

仅在使用3D变换时才会出现此效果.使用时一切正常

-webkit-transform: scale(2);.

为了在iPhone/iPad上利用硬件加速,使用3D转换会很不错.

有人知道怎么告诉Safari用新的比例重新渲染div吗？

Answer 1

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

你可以:

•为transitionend添加eventlistener,然后将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

Answer 2

我发现当试图强迫在safari中重绘div时出于其他原因(在悬停时重新计算文本溢出),这很简单:

selector {
    /* your rules here */
}
selector:hover {
    /* your rules here */
}
selector:hover:after {
    content:"";
}

我在悬停时做了一些改变填充以适应一些按钮的东西,但是在safari/chorme中它没有正确地重新计算内容,添加了:在伪类之后做了伎俩.

请注意,我没有在互联网上的任何地方找到这个,我在摆弄时发现了它.