Firefox的CSS3徑向漸變消失

我有一個HTML5頁面的背景：Firefox的CSS3徑向漸變消失

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

這工作得很好，直到頁面獲取長（15000px左右），此時的背景完全消失上Firefox瀏覽器。

看別處提供了兩個解決方案，不會爲此工作。他們將使用html身體高度100％或背景附件：固定的HTML &。兩者都將漸變高度與視口相匹配，而不是文檔高度。

這對較短的頁面正常工作，但在較長的頁面上打破FF。有沒有一個CSS技巧，我可以使用，而不重構我的HTML？

來源

2012-09-20 lars

我沒有遇到同樣的問題：http://jsfiddle.net/7vpXW/1/。你有什麼樣的演示？ –

示例1：http://jsfiddle.net/7vpXW/2/。例2：http://jsfiddle.net/7vpXW/3/。例3：http://jsfiddle.net/7vpXW/4/。嘗試獲取匹配聲明高度的行爲，同時將高度保留爲自動。 – lars

嘗試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/

來源

2012-09-21 18:25:52

尋找不固定的，希望它伸展到頁面大小。這個例子是一個更多的內容導致問題：http://jsfiddle.net/76cyn/3/ – lars

我沒有看到它，我看到的梯度「平鋪」之前，但是，這看起來很正常。隨着Firefox 16 –

我在FF15，這可能是問題。我會抓住一個捕獲，但它可能只是一個渲染問題。 – lars

在我的情況以前的答案沒有解決它，但我找到了一個解決方案：

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

一旦我指定了「不重複」，無論文檔高度變化如何（無限滾動），它都會尊重100％。

來源

2012-09-28 22:49:10 lars

Firefox的CSS3徑向漸變消失

回答

相關問題