Safari 不透明动画有时会失败答案

【问题标题】：Safari opacity animation sometimes failsSafari 不透明动画有时会失败
【发布时间】：2023-03-29 04:49:01
【问题描述】：

更新：我找到了解决方法，请参阅我自己的答案。

我有一个动画，通过更改直接放置在另一张图像之上的一个图像的不透明度，在两个图像之间来回交叉淡化。

症状：

所有浏览器都可以正常工作。

它在 Safari 中偶尔会在一段时间后停止工作 - 通常永久卡在打开的图像上，或者您在淡入淡出中看到两到三帧而其余的被跳过，有时您会在两种状态之间闪烁而没有任何动画。

在移动设备上出现的频率明显更高。无论哪种方式总是通过重新启动浏览器来清除，但通常不是通过重新加载标签来清除。有时通过导航一个新页面然后使用返回按钮来修复。

我在两张图片上都使用了will-change: opacity，它没有帮助。

当我通过更改单个背景图像 URL 为相同的图形设置动画时，我没有注意到这个问题 - 但的问题是它在 Firefox 中不受支持......

图像在浏览器中按比例缩小 - 完整尺寸为 1200x1200，在大约 400x400 的框架中 - 尽管这看起来并不过分，而且它们已被压缩。

由于页面其余部分的布局，它们需要在网格内（使用 position: absolute 不会给它们高度。）

简化的 HTML 和 CSS：

@keyframes crossfade {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  66.6% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<img class="start-frame" src="square-start-1200.jpg">
<img class="end-frame" src="square-end-1200.jpg">

     /* within a div that has display: grid... */

     img {
        grid-column: 1;
        grid-row: 1;
        will-change: opacity;
      }

      img.start-frame {
        z-index: 1;
      }

      img.end-frame {
        /* placed on top of the start image, but needs to be hidden to begin with */
        opacity: 0;
        z-index: 2;

        animation: crossfade linear 20s;
        animation-iteration-count: infinite;
      }

#### 受影响的浏览器

Mojave 10.14.6 上的 Safari 14.1.2
装有 iOS 14.7.1 的 iPhone 6S
装有 iOS 14.7.1 的 iPad Mini 第 5 代
装有 iOS 13.7 的第 7 代 iPod Touch

【问题讨论】：

标签： safari css-animations mobile-safari

【解决方案1】：

一种解决方法 - 反向运行动画：

animation-direction: reverse;

因为在这种情况下它是对称的，所以没关系。

我无法解释，但在 Mojave 上的 Safari 14.1.2 以及 iOS 13 (iPod) 和 iOS 14 (iPhone 和 iPad) 上的正常日常使用中，已证明这是稳定的。选项卡、刷新它们、睡眠/唤醒周期等。

我也尝试过让动画从 5% 而不是 0 开始（即在 0% 和 5% 标记处都有opacity: 0，但只是改变了似乎有立竿见影的效果的方向。）

添加animation-delay（希望丢失/卡顿的帧可能与未完成加载的图像有某种关联）也无济于事。

【讨论】：

【解决方案2】：

您可以尝试使用webkit 属性，我认为它可以正常工作，请查看以下示例。

     img {
        grid-column: 1;
        grid-row: 1;
        will-change: opacity;
      }

      img.start-frame {
        z-index: 1;
      }

      img.end-frame {
        opacity: 0;
        z-index: 2;
        -webkit-animation: crossfade linear 20s infinite;
        animation: crossfade linear 20s infinite;
      }

【讨论】：