css - 当元素高于约 32,000 像素时，Chrome 中的背景渐变会中断

Question

我有一个案例，允许用户查看通常分页的表格的全部内容，但在极少数情况下，元素会变得很长。在 Chrome 中，当元素的高度超过大约 32,000 像素时，背景渐变会分崩离析，呈现为纯黑色和各种其他 block 。

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

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

我看到类似的讨论here从 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/