当JS改变页面高度时，Body背景CSS梯度不会重新绘制

Body background CSS gradient isn't redrawn when JS changes page height

本文关键字：新绘制 绘制 CSS 改变 JS 高度 背景 Body      更新时间：2023-09-26

我使用100%垂直CSS渐变作为body元素的背景，如下所示:

body {
    background: -moz-linear-gradient(top,  rgba(0,101,189,0.5) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(0,101,189,0.5) 0px,rgba(255,255,255,1) 600px);
    background: -o-linear-gradient(top,  rgba(0,101,189,0.5) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top,  rgba(0,101,189,0.5) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,101,189,0.5) 0%,rgba(255,255,255,1) 100%);
    min-height: 100%;}

然而，奇怪的事情发生当JS(在我的情况下，bootstrap.js)动态改变页面的高度-例如，当用户打开内容的折叠部分，但在其他情况下也是如此。身体的背景梯度没有重新绘制正确，并出现"损坏"。请看这个截图:https://i.stack.imgur.com/4OYaN.jpg

任何想法?很多谢谢!

有一个关于强制Webkit浏览器重新应用CSS样式的讨论:我如何强制Webkit重新绘制/重新绘制以传播样式更改?

为我工作的解决方案是在改变页面高度后添加和删除空<style>元素:

$('<style></style>').appendTo($(document.body)).remove();

这并不能真正解决您的问题。但是我在使用渐变(我主要使用Chrome)的不同地方多次遇到这个问题。我认为这更多地取决于浏览器以及它如何实现渐变。看起来它很难在需要的时候重新粉刷。你可以把你的渐变放在一个类中，比如。gradient，然后当你完成过渡时删除并添加这个类(从碎片版本到新版本会有轻微的可见闪光)。这可能会迫使浏览器重新绘制渐变，但我还没有测试过。虽然不完美，但这是我的全部。

相关文章：