0

我使用 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

有任何想法吗？非常感谢！

4

2 回答 2

3

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

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

$('<style></style>').appendTo($(document.body)).remove();
于 2013-05-17T07:04:56.823 回答
0

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

于 2013-04-23T19:30:26.240 回答