Glitchy CSS 动态线性渐变滚动

Question

我注意到，如果您沿着页面快速滚动，CSS linear-gradient作为动态背景（使用keyframes ）似乎会出现故障。 例如， 在这里，如果您抓住滚动条并非常快速地上下滚动，您可以看到下面的白色。 似乎与显示更多页面时渐变重绘的方式有关，或者...我已经尝试在所有地方进行搜索，但无法找到任何特定于此的东西 - 有什么想法吗？ 相关的 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;
}

它可能不是最好的解决办法，但它的工作原理。