Радиальный градиент Google Chrome

Question

Я делаю сайт, и я решил использовать градиент вместо изображения, но столкнулся с проблемой в Google Chrome (версия 29.0.1547.65). Градиент мигает со следующим кодом.

HTML:

<div class="blueline-top"></div> 

CSS:

.blueline-top { 
    width: 100%; 
    height: 60px; 
    background: radial-gradient(50% 300px, circle, #157cda, #14426c); 
    background: -webkit-radial-gradient(50% 300px, circle, #157cda, #14426c); 
} 

Демо: http://jsfiddle.net/DaZzz/BCBG8/1/

Как решить эту проблему? Кто-нибудь сталкивался с этим раньше?

UPD. 1: Я использую Mac OS 10.8.4. В Safari этот код работает отлично.

UPD. 2: Столкнулась с той же проблемой в Opera 17.0.1241.18.

Answer 1

Перейти к меню и снять отметку с этой опции: настройки -> показать дополнительные параметры -> Использовать аппаратное ускорение, если доступно.

Если проблема перестает occurying это может быть несколько вещей:

1. Ваша видеокарта будет плохо.

2. У вас есть ошибка драйвера видеокарты.

3. В вашей версии хром есть ошибка в вашей ОС.

1 и может быть исключен путем тестирования на другой машине. 2 можно исключить, обновив и/или понизив рейтинг вашего драйвера. 3 можно исключить, обновив или понизив версию вашего хрома.

Из моего опыта 1. не так необоснован, как вы могли бы подумать.

Answer 2

Возможно, это связано с проблемами пиксельной ходьбы и инверсии. Вероятно, это связано с неправильным напряжением на ЖК-дисплее. Я не знаю много об этом, но есть некоторые очень хорошие тесты, чтобы увидеть, если ваш монитор имеет его здесь:

http://www.lagom.nl/lcd-test/inversion.php#invpattern