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

好的，这有点奇怪，显然是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;

}

使用box-shadow可以实现渐变和边框：

.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/