iOS设备（iPhone / iPad）上的CSS3过渡：应用不透明度过渡DOM对象华而不实

Question

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

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

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

我只在我的iPAD上看这个。使用我的电脑，过渡是完美的。

如何删除此问题？

Answer 1

你需要硬件加速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显示加速的元素。