我正在创建一个带有一堆滚动层（前景、中景、背景等）的场景，但令人讨厌的是，当动画重新启动时，我在 Safari (14.0.3) 上出现闪烁。这不会发生在 Chrome 或 Firefox 上。
我在这里创建了一个最小的可重现示例：
https://brendon.github.io/safari_flicker/index.html
这是代码：
.animation {
position: relative;
height: 395px;
background-image: linear-gradient(#1b9dd9, #00b6ed 44%, #ffe56c 75%);
}
.animation .scrollingAnimation {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
}
.animation .scrollingAnimation:before {
content: "";
position: absolute;
height: 100%;
width: 200%;
}
.animation .foreground:before {
/* Dimensions: */
/* width: 1696px; */
/* height: 74px; */
min-width: 6784px;
background-image: url("https://brendon.github.io/safari_flicker/foreground.png");
background-position: left bottom -11px;
background-repeat: repeat-x;
background-size: auto 74px;
transform: translateX(-1696px);
animation: foreground 10s linear infinite;
}
@keyframes foreground {
0% {
transform: translateX(-1696px);
}
to {
transform: translateX(-3392px);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="animation">
<div class="foreground scrollingAnimation"></div>
</div>
</body>
</html>这是该问题的视频：
https://github.com/brendon/safari_flicker/raw/main/flicker_video.mp4
我已经尝试了很多方法来摆脱这个问题。根据窗口宽度，它似乎有时会消失，但我正在寻找可靠的解决方案：D
iOS Safari 上也存在此问题。
我应该提到我不想为background-position属性设置动画，因为这会导致性能问题并且不会被 GPU 加速。
我最终使用 GSAPfromTo()来管理过渡工作，而不是依赖 CSS 动画：
<div class="foreground scrollingAnimation"><div></div></div>
gsap.fromTo(
'.foreground > div',
{ xPercent: -25 },
{ xPercent: -50, duration: 10, repeat: -1, ease: 'none' }
)
.scrollingAnimation {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
> div {
position: absolute;
height: 100%;
}
}
.foreground {
> div {
width: calc(1696px * 4);
background: {
image: url("https://brendon.github.io/safari_flicker/foreground.png");
position: left bottom;
repeat: repeat-x;
size: auto 74px;
}
}
}
它在非常宽的屏幕上会崩溃，但实际上，如果您摇动 6000 像素宽的窗口，先生，祝您好运。
GSAP 动画的方式是它translateX在（我认为）期间通过 javascript 更改值requestAnimationFrame，因此它很好且平滑，并且在此上下文中不存在闪烁问题。