Від автора: наприклад, у вас є градієнт в CSS від червоного кольору до прозорості. Просто, так адже? Ну, прям от так, як показано нижче.
.element {
background: linear-gradient(
to bottom,
red,
transparent
);
}
Однак тут є великий нюанс. У Chrome (і на Android), Firefox і Edge все відображається нормально.
Але в Safari (і на iOS в тому числі) все не так добре.
Наскільки я зрозумів, суть у тому, що прозорий колір сприймається як «прозорий чорний». Виправити проблему можна, вказавши повну версію прозорого кольору. Ось так:
.element {
background: linear-gradient(
to bottom,
red,
rgba(255, 0, 0, 0)
)
}
З hex коди не завжди так просто підібрати колір, дуже складно знайти еквівалентний колір RGBa або # hsla-color hsla. Хоча можна запросто знайти в мережі конвертер для кольору.
В специфікації CSS Level 4 є функція color(), що спрощує цю задачу:
.element {
background: linear-gradient(
to bottom,
#eb8fa9,
color(#eb8fa9 alpha(0%)) /* або це color-mod()? */
)
}
Ця функція ще не підтримується. Допомогти може Sass:
.element {
background: linear-gradient(
to bottom,
#eb8fa9,
rgba(#eb8fa9, 0);
)
}
