Подтвердить что ты не робот

Размытые линейные градиенты останавливаются в хроме

Если я использую линейный градиент с несколькими остановками, например:

div
{
  border: 1px solid black;
  width: 100px;
  height: 2000px;
  display: inline-block;
  background-image: linear-gradient(to bottom, #383937 0, #001500 35px,
    #ffffff 35px, #b0b0b0 150px, #ffffff 150px, #ffffff 100%);
}

Firefox Неполадка.

Chrome Переходы между цветами градиента размыты. Я повторно использую позицию для определения нового цвета, поэтому на позиции 35 цвет идет от # 001500 до #ffffff мгновенно (или, по крайней мере, должен). Размытость между остановками градиента увеличивается, если div больше.

IE Существует некоторая размытость, как в хроме, но менее экстремальная. Как и в Chrome, размытость увеличивается, если div больше.

http://jsfiddle.net/cyq7grdr/5/

Градиент в firefox:

gradient in firefox

Градиент в хроме:

gradient in chrome

Градиент в хроме, когда div меньше (1000px вместо 2000px):

enter image description here

Изменить

Кажется, что это исправлено в chrome, но введено в firefox. Если кто-нибудь сможет подтвердить это, я буду счастлив.

4b9b3361

ОТВЕТЫ

Ответ 1

Не исправляйте проблему, просто обходной путь... вы можете использовать несколько градиентов как несколько фонов небольшого размера, чтобы не запускать проблему (например, ~ 300px). Объедините с background-size и background-position, и вы получите что-то уродливое, но работает:

background-image:
    linear-gradient(to bottom, #383937 0, #001500 35px, #ffffff 35px, #b0b0b0 150px),
    linear-gradient(to bottom, #963 0, #abc 150px);
background-size:
    100px 150px,
    100px 150px;
background-position:
    0 0,
    0 150px;
background-repeat: no-repeat;

См. JSFiddle для демонстрации.