当元素高于大约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/