Фоновый градиент перерывов в Chrome, когда элемент выше, чем около 32 000 пикселей.

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)); 

Я вижу подобное обсуждение 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; 

}

Чтобы получить градиент и границу, можно добиться с помощью теневого окна:

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