Glitchy CSS动态线性渐变滚动

编程问答 2022-06-12

问题描述

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

backgroundgradienthtmlvisual-glitch