Задать вопрос
@sasha_jarvi
css

Как исправить некорректное отображение градиента в Safari 12.0.3?

Имеется следующий код для задания фона элементу:

background-image: linear-gradient(to bottom, #373c46, rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(top, #373c46 0%, rgba(255, 255, 255, 0) 100%);


В Chrome данный градиент отображается корректно:
N6YvX.png
В Safari, наоборот, нет:
axixr.png
Как исправить указанную ошибку?
  • Вопрос задан
  • 1556 просмотров
4 комментария
Подписаться 1 Простой 4 комментария
Решения вопроса 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Нужно перевести $header-grad в rgba и плясать от него. Сафари любой прозрачный градиент воспринимает как 0% черного (или белого? не помню). Короче, если, например, хотим сделать исчезающий красный, то пишем так:
elem {
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
    /* ниже ваш цвет */
    background-image: linear-gradient(to bottom, rgba(55, 60, 70, 1), rgba(55, 60, 70, 0));
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@Desay
htmlbook.ru/css/-webkit-linear-gradient
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
[python,go] Залить ВИДЕО в тикток
19 апр. 2024, в 23:00
5000 руб./за проект
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Ещё заказы