macOS/iOS: значение transparent в linear-gradient свойстве

Частенько дизайнеры любят делать различного рода тени, переходы и затухания в веб проектах. Сейчас мы поговорим об одном из таких случаев и нюансе который возник. Необходимо сделать элемент, в который выводится динамический текст и если текст длинный, то в конце он должен "затухать". Все просто... имеем блок с фоновым цветом, выводим в него текст без переноса строк и обрезаем его по контуру через свойство overflow:hidden. Для эффекта затухания добавим поверх псевдоэлемент с абсолютным позиционированием в конце блока. Для самого же эффекта затухания в данном случае используем linear-gradient от прозрачного до цвета фона обьекта (в качестве прозрачного указано значение transparent).

Результат следующий:

Как мы видим все хорошо и работает ожидаемо на macOS в браузере Chrome (такой же результат на macOS:FireFox, Windows:Chrome / FireFox / IE).

В мобильном браузере на Android все также верно (браузер Chrome).

Но нас ожидал сюрприз в Safari на macOS:

Как мы видим, наш псевдоэлемент имеет явно другой тон цвета и создает совсем не ожидаемый и не нужный нам эффект. Кстати, такая же ситуация и на мобильной версии (iOS Safari):

Одним из решений проблемы - использовать вместо linear-gradient подготовленную картинку. Но все же это немного ограничивает с размерами и например, цветовой темизацией. Немного поиграв с этим свойством, было обнаружено, что проблема именно в transparent значении. После чего transparent было изменено на цвет фона обьекта с нулевым альфа каналом - проблема ушла!

See the Pen macOS/iOS: linear-gradient + transparent by Stanislav (@slavko23) on CodePen.