Градиент в Safari — CSS3

На одной из последних работ столкнулся с неожиданной проблемой. При вставке видео в страницу обнаружил, что видео имеет четкие не прозрачные края серого цвета. Находясь на белом полотне видео выглядело не очень красиво:

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

background:linear-gradient(90deg, transparent, #fff);

И все сразу стало отлично:

Но при тестировании выяснилось, что в браузере Safari это выглядит вот так:

Как мы видим градиент применился частично.

Все дело в том, что safari некорректно работает со значением transparent. Для решения проблемы градиент следует задавать вот так:

background:linear-gradient(90deg, rgba(255,255,255,0), #fff);

После этого проблема решилась. Надеюсь это поможет вам сократить время на отладку вашего кода. Всем успехов!