滚动时出现故障 CSS 动态线性渐变

Question

我注意到 CSS linear-gradient 作为动态背景（使用 keyframes），如果您在页面上滚动得非常快，它看起来会出现故障。例如，here，如果你抓住滚动条并快速上下滚动，你可以看到下面的白色。似乎与显示更多页面时渐变如何重绘有关，或者...我尝试在所有地方进行搜索，但未能找到与此相关的任何内容 - 有什么想法吗？相关的 CSS 是：

body {
    background: linear-gradient(angle, some colours);
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

我想知道是否必须以某种方式将背景固定为某种“图像”，以便浏览器不必在滚动时重新绘制渐变。

Answer 1

考虑应用翻译的固定元素：

html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(60deg, red, blue, green);
  animation: gradient 3s linear infinite alternate;
}

@keyframes gradient {
  100% {
    transform: translateX(-50%);
  }
}

Answer 2

只需在伪 ::before 元素上设置样式，而不是直接在 body 上设置样式，因此您可以使用 position: fixed.

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(240deg, #567EB9 0%, #B29ACA 50%, #B29ACA 70%, #F9839B 95%, #e6b394 100%);
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
}

它可能不是最佳解决方案，但它确实有效。

滚动时出现故障 CSS 动态线性渐变

Glitchy CSS dynamic linear-gradient on scroll

html

css

background

gradient

visual-glitch