如何在Safari中进行WebKit 3D转换后强制重新渲染 [英] How to force re-render after a WebKit 3D transform in Safari

问题描述

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

I'm using CSS 3D transformations to zoom a div, for example:

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

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

The scaling itself works fine in any WebKit browser. However, when using this on Safari (mobile or Windows), the content of the div is not re-rendered. The result is that the content gets blurred after scaling.

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

This effect only occurs when using 3D transformations. Everything works fine when using

-webkit-transform：scale（2）; 。

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

In order to exploit hardware acceleration on iPhone/iPad, it would be nice to use the 3D transformations.

推荐答案

任何人都知道如何告诉Safari重新渲染一个div。模糊是因为Webkit将文本视为图像，我想这是硬件加速的代价。我假设你在ui中使用过渡或动画关键帧，否则性能增益可以忽略不计，你应该切换到非3d变换。

The reason why the text is blurry is because Webkit is treating the text as an image, I guess it's the price of being hardware accelerated. I'm assuming you are using transitions or animation keyframes in your ui, otherwise the performance gains are negligible and you should switch to non-3d transforms.

你可以：

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

• Add an eventlistener for transitionend and then replace the 3d transform for a standard transform, such as...

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

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

• Since Webkit treats stuff as an image, it's better to start big and scale down. So, write your css in your "end state" and scale it down for your normal state...

 #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上也有）：

And you get a crispy text on hover. I made a demo here (works on iOS too):

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

这篇关于如何在Safari中进行WebKit 3D转换后强制重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！