Question

我使用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）动态地改变页面的高度时会发生奇怪的事情 - 例如，当用户打开折叠的内容部分时，但在其他情况下也是如此。正文背景渐变未正确重绘并显示为“已损坏”。请参见此屏幕截图：http://imgur.com/wf5G8Qn

有什么想法吗？非常感谢！

Answer 1

讨论强制Webkit浏览器重新应用CSS样式：How can I force WebKit to redraw/repaint to propagate style changes?

对我有用的解决方案是在更改页面高度后添加和删除空<style>元素：

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

Answer 2

这不是解决问题的真正答案。但是我在使用渐变的各个地方多次遇到过这个问题（我主要使用Chrome）。我认为更重要的是浏览器以及它如何实现渐变。似乎很难根据需要重新绘制它。您可以将渐变放在像.gradient这样的类中，然后在完成转换时删除并添加类（从碎片版本到新版本会有轻微的可见闪存）。这可能会强制浏览器重绘渐变，但我还没有测试过它。它并不完美，但它是我得到的全部。

当JS更改页面高度时，不会重绘主体背景CSS渐变

2 个答案: