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

У меня есть случай, когда пользователю разрешено видеть все содержимое таблицы, которая обычно разбита на страницы, и в редких случаях элемент становится очень длинным. В 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 года, но это кажется другой.


google-chrome gradient css background linear-gradients
person isherwood    schedule 24.04.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, это немного странно и явно связано с ошибкой в ​​​​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/

person daamsie    schedule 24.04.2013
comment
Очень интересно. В моем случае это также исправляет градиент. Я попробую поставить фон на дочерний элемент. - person isherwood; 24.04.2013
comment
Вы также можете создать фальшивую рамку, используя box-shadow. Добавлю это к ответу. - person daamsie; 24.04.2013
comment
+1 за поиск обходного пути. Если вам нужна рамка, вы можете попробовать вместо нее использовать outline; кажется, это работает там, где border нет (я только что проверил скрипку, и все в порядке). box-shadow также может быть вариантом, хотя он сложнее, чем outline. В качестве альтернативы используйте селектор :before или :after, чтобы создать псевдоэлемент для вашего border. - person Spudley; 24.04.2013
comment
Обратите внимание, что в отличие от рамок, контуры и тени блоков никак не влияют на размер и расположение блоков, что может быть проблемой, а может и не быть. - person BoltClock; 24.04.2013
comment
К сожалению, у моего элемента уже есть box-shadow. Однако я успешно помещаю фоновый градиент в дочерний элемент. Спасибо, что разобрались с этим! - person isherwood; 24.04.2013