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終端上使用以下鍵在Mac上運行Safari：

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

CA_COLOR_OPAQUE顯示哪些元素被加速。