css - 当元素高于约 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 年的类似讨论，但这似乎有所不同。

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/