CSS3 Firefox 径向渐变消失答案

【问题标题】：CSS3 Firefox radial gradient disappearsCSS3 Firefox 径向渐变消失
【发布时间】：2012-09-20 18:01:22
【问题描述】：

我有一个 HTML5 页面，其背景为：

background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);

这工作正常，直到页面变长（15000 像素左右），此时背景在 Firefox 上完全消失。

寻找其他地方为我提供了两种对此不起作用的解决方案。他们将使用 html & body height 100%，或 background-attachment:fixed。两者都将渐变高度与视口匹配，而不是文档高度。

这适用于较短的页面，但在较长的页面上会中断 FF。有没有我可以在不重构我的 html 的情况下使用的 CSS 技巧？

【问题讨论】：

我没有遇到同样的问题：jsfiddle.net/7vpXW/1。你有某种演示吗？
示例 1：jsfiddle.net/7vpXW/2。示例 2：jsfiddle.net/7vpXW/3。示例 3：jsfiddle.net/7vpXW/4。试图使行为与声明的高度相匹配，同时将高度保留为自动。

标签： html firefox css radial-gradients

【解决方案1】：

在我的情况下，以前的答案没有解决它，但我找到了一个解决方案：

    background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%) no-repeat;

一旦我指定了“不重复”，它将尊重 100%，无论文档高度如何变化（无限滚动）。

【讨论】：

【解决方案2】：

尝试在 HTML 节点上指定 min-height：

演示：http://jsfiddle.net/SO_AMK/76cyn/

CSS：

html {
    min-height: 100%;
}

body {
    background: radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -o-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -moz-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #868c93 0%, #28343b 100%);
}

或者，如果你想要一个固定的背景：http://jsfiddle.net/SO_AMK/76cyn/1/

【讨论】：

寻找非固定的，希望它拉伸到页面大小。此示例包含更多导致问题的内容：jsfiddle.net/76cyn/3
我没有看到它，我之前曾经看到过渐变“平铺”，但是在我看来，那个看起来很正常。使用 Firefox 16
我在 FF15，这可能是问题所在。我会抓拍，但这可能只是渲染问题。
我会给你答案，因为它看起来像是那个版本的 FF 的问题。
谢谢，至少好消息是他们已经修好了！