我在 DIV 中有一个简单的 IMG。 使用 JavaScript,我将转换应用到 DIV 元素:
<div style="transition: opacity 0.8s linear; opacity: 0.5;"><img
src="..." /></div>
当转换时间结束时,CHE DIV 元素(或者可能是 DIV 的父元素)不可见并立即返回可见。 这个问题使 bat 闪光。
我只在我的 iPAD 上看这个。在我的 PC 上,过渡非常完美。
如何解决这个问题?
最佳答案
您需要对 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 显示哪些元素被加速。
关于ios - iOS 设备 (iPhone/iPad) 上的 CSS3 转换 : applying opacity transition the DOM object flashy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12841914/