iOS 设备 (iPhone / iPad) 上的 CSS3 过渡：应用不透明度过渡使 DOM 对象浮华

【问题标题】：CSS3 transition on iOS devices (iPhone / iPad): applying opacity transition the DOM object flashyiOS 设备 (iPhone / iPad) 上的 CSS3 过渡：应用不透明度过渡使 DOM 对象浮华
【发布时间】：2026-02-06 12:40:02
【问题描述】：

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

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

当过渡时间结束时， che DIV 元素（或者可能是 DIV 的父元素）变为不可见并立即返回可见。这个问题让蝙蝠一闪而过。

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

如何解决这个问题？

【问题讨论】：

我发现如果没有 AJAX 命令在进行中，这个缺陷的频率会低很多。

标签： ios ipad css css-transitions mobile-webkit

【解决方案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 显示哪些元素被加速。

【讨论】：