HTML+CSS无限滚动背景：在Safari上重复闪烁

html5 • • 问答

我正在创建一个带有一堆滚动层（前景、中景、背景等）的场景，但令人讨厌的是，当动画重新启动时，我在 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>
    <div></div>
  </div>

</body>

</html>
以上是HTML+CSS无限滚动背景：在Safari上重复闪烁的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容