Общеизвестно, что браузер Safari от компании Apple, функционирующий на движке Webkit, немного по-другому отображает контент веб - страницы в сравнении с браузерами Opera, Mozilla Firefox и Google Chrome.
Но если с Firefox всё понятно - он разработан на движке собственного производства Gecko, то почему в браузере Safari сайт выглядит несколько иначе, чем в Opera и Chrome, так же работающих на движке Webkit?
Причина здесь кроется в небольших различиях механизмов рендеринга браузеров, отвечающих за вывод веб - страницы на экран монитора. Т. к. эта статья не о различиях в движках браузеров, то подробно на этом останавливаться не будем.
Кому интересно, можно почитать здесь.
Итак, чтобы задать css - градиент для элемента в браузерах Opera, Chrome и Firefox, необходимо воспользоваться следующим кодом:
где to left - направление градиента (слева - направо),
#d87373, #ff003b - необходимые цвета.
Чтобы задать тот же самый градиент в Safari, придётся воспользоваться такой конструкцией:
CSS градиент в Сафари снизу вверх:
Сверху вниз:
На этом всё, задавайте свои вопросы в комментариях!