當元素高於大約32,000像素時，Chrome中的背景漸變中斷

Question

我有一種情況，允許用戶查看通常分頁的表的全部內容，並且在罕見情況下元素變得很長。在Chrome中，當元素的高度超過32,000像素時，背景漸變將分解，呈現爲純黑色和其他各種塊。

http://jsfiddle.net/isherwood/hBm4C/1/

background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#ccc), color-stop(100%,#f5f5f5)); 

我看到從2011年類似的討論here，但這似乎不同。

Answer 1

好吧，這是一種獨特而明確下來一個bug在Chrome

如果您從您的造型邊境奇蹟般地工作正常：

http://jsfiddle.net/hBm4C/2/

.gradient-tall { 
width: 150px; 
height: 35000px; 
display: inline-block; 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ccc), color-stop(100%,#f5f5f5)); 
vertical-align: top; 

}

要使用漸變和邊框，可以使用箱形陰影來實現：

.gradient-tall { 
    width: 150px; 
    height: 35000px; 
    display: inline-block; 
    box-shadow:0 0 0 1px #777; 
    background:#ccc; 
    background-image:-webkit-linear-gradient(#ccc 1%, #f5f5f5 99%); 
    vertical-align: top; 
} 

http://jsfiddle.net/hBm4C/3/