сафари и firefox vs chrome - css градиенты

Question

Я столкнулся с необычной ситуацией: chrome vs safari + firefox - очень большая разница в том, как визуализируются градиенты.

наблюдать: http://jsfiddle.net/k9z6pt7z/

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(56,56,56,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(56,56,56,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(56,56,56,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#383838',GradientType=0); /* IE6-9 */ 

Я думаю, что хром один правильный вариант, как мне сделать сафари + и далее вести себя таким же образом?

левый сафари, правый хром.

Answer 1

Короткий ответ в том, что вы не делаете.

Долгий ответ заключается в том, что нет конкретного метода, предусмотренного для того, как они должны получать от начальных значений градиента до ваших конечных значений. Аппаратное ускорение передало бы это на механизм рендеринга любой видеокарты, но то, как продавец будет с ним работать, будет отличаться от механизма рендеринга, так как никакие заполняющие градиенты не останутся в отдельных браузерах.

Если вам действительно нужно, чтобы они были как можно ближе (заметим, что я не сказал то же самое), тогда вам придётся прибегнуть к использованию изображения большего размера в качестве фона и регулировки его положения в соответствии с областью доступный. Все это означает несколько разные результаты при разных размерах экрана.

Конечно, некоторые браузеры вообще не будут отображать градиент.

Если вы действительно хотите, чтобы вы могли попробовать изменить начальные и значения и проценты, но это очень много работы, и эффективность зависит от того, насколько хороши ваши мониторы пользователей, поэтому на самом деле это не так полезно.

Так что на самом деле это действительно важно для пользователя (а не для вас). Он будет казаться довольно похожим (даже близко), если бы они переключались между браузерами (почему бы им) и всегда были последовательными при использовании в конкретном браузере. Шрифты будут отображаться по-разному между браузерами, рендеринг разметки будет иметь различия между тем же браузером на разных ОС/платформах.

Важная вещь не в том, чтобы быть пикселем идентичным на каждой платформе/ОС/браузере, потому что это просто невозможно. а вместо этого предоставить пользователям четкий, последовательный доступ к необходимой им информации.