1

我在 DIV 中有一个简单的 IMG。使用 JavaScript,我将转换应用于 DIV 元素:

<div style="transition: opacity 0.8s linear; opacity: 0.5;"><img
  src="..." /></div>

当转换时间结束时, che DIV 元素(或者可能是 DIV 的父元素)变得不可见并在瞬间返回可见。这个问题使蝙蝠闪光。

我只在我的 iPAD 上看这个。使用我的电脑,过渡非常完美。

我怎样才能消除这个问题?

4

1 回答 1

0

您需要对 div 进行硬件加速。为此,您需要添加以下样式:

 -webkit-transform: translateZ(0px);

他们说以下样式也可以帮助启用硬件加速,但它对我不起作用。

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;

为了帮助调试它,您需要从终端使用以下键在 Mac 上运行 Safari:

$> export CA_COLOR_OPAQUE=1 
$> /Applications/Safari.app/Contents/MacOS/Safari

CA_COLOR_OPAQUE 显示哪些元素被加速。

于 2013-07-10T13:33:15.367 回答