Glitchy CSS动态线性渐变滚动

问题描述

我注意到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%;
    }
}

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

解决方法

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

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%);
  }
}

,

只需在伪::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;
}

它可能不是最佳解决方案，但它可以工作。