Почему не срабатывает градиент на тексте?

Question

[winde_alps]

Добрый день. Почему в САФАРИ (в остальных браузерах все ок) не срабатывает градиент на тексте? Вторая секция, где изображение с девушкой и звездами с левой стороны.
Ссылка на страницу winde.space/astrology

Все св-ва background-clip. text-fill-color поддерживаются в Сафари, но почему-то блок с текстом не отображается.

Comments

[Ankhena]

Какая версия сафари?

Answer 1

[ljutaev]

привет) надеюсь поможет
https://codepen.io/ljutaev/pen/YLdxpO

Comments

[winde_alps]

в том то и дело, что я как раз и использую связку background + background-clip, но только вместо color transparent, использую text-fill-color и только в сафари пустое место на месте текста, хотя все св-ва поддерживаются в сафари (префиксы есть). Но попробую именно color использовать вместо text-fill-color.

Answer 2

[profesor08]

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

Comments

[winde_alps]

Мне потом этот текст из админки выводить, так что красить каждую строчку - это костыльно, да и геморно. Вдруг будет меньше строк или наоборот в 2 раза больше, тем более тут градиент плавный, так что при помощи nth-child даже не выйдет нормально закрасить

[profesor08]

Вообще легко, ты всегда знаешь число блоков и можешь программно подсчитать для каждого блока свой уникальный цвет, либо на js, либо еще не сервере. Более того, ты можешь подсчитать кол-во строк и каждую красить в свой цвет. Если браузер чего-то не поддерживает, ты не сможешь его заставить, остаются только решения в обход. Только было бы желание.