Фоновый фильтр не работает в Safari IOS ⇐ IOS
-
Anonymous
Фоновый фильтр не работает в Safari IOS
Я работаю над веб-портфолио и реализовал раскрывающееся меню для просмотра на мобильных устройствах. В этом раскрывающемся меню есть размытие фона, созданное с помощью свойства backdrop-filter. Он отлично работает во всех мобильных браузерах, кроме Safari. Я не знаю, что делаю не так :c вот мой стиль выпадающего меню
/* Раскрывающееся меню */ .dropdown_menu-dark { дисплей: нет; позиция: абсолютная; z-индекс: 10; справа: 2рем; верх: 60 пикселей; ширина: 300 пикселей; высота: 0; цвет фона: rgba(255, 255, 255, 0,1); радиус границы: 10 пикселей; переполнение: скрыто; переход: высота 0,2с кубический-безье(0,175, 0,885, 0,32, 1,275); } .dropdown_menu-dark.open { высота: 300 пикселей; } /* ЗДЕСЬ Я УСТАНОВИЛ ФОННЫЙ ФИЛЬТР */ @supports ((-webkit-backdrop-filter: размытие(15px)) или (backdrop-filter: размытие(15px))) { .dropdown_menu-dark { -webkit-backdrop-filter: размытие (15 пикселей); фоновый фильтр: размытие (15 пикселей); } В браузере Safari он видит вот так. Пример в браузере Safari
А вот как это выглядит в других мобильных браузерах (или как должно выглядеть) Пример других браузеров
Если вы скажете мне, в чем я ошибаюсь, или есть ли альтернативное решение для создания этого стиля размытого фона (кроме размещения размытого фонового изображения), это будет для меня большой помощью.
Заранее спасибо
Я работаю над веб-портфолио и реализовал раскрывающееся меню для просмотра на мобильных устройствах. В этом раскрывающемся меню есть размытие фона, созданное с помощью свойства backdrop-filter. Он отлично работает во всех мобильных браузерах, кроме Safari. Я не знаю, что делаю не так :c вот мой стиль выпадающего меню
/* Раскрывающееся меню */ .dropdown_menu-dark { дисплей: нет; позиция: абсолютная; z-индекс: 10; справа: 2рем; верх: 60 пикселей; ширина: 300 пикселей; высота: 0; цвет фона: rgba(255, 255, 255, 0,1); радиус границы: 10 пикселей; переполнение: скрыто; переход: высота 0,2с кубический-безье(0,175, 0,885, 0,32, 1,275); } .dropdown_menu-dark.open { высота: 300 пикселей; } /* ЗДЕСЬ Я УСТАНОВИЛ ФОННЫЙ ФИЛЬТР */ @supports ((-webkit-backdrop-filter: размытие(15px)) или (backdrop-filter: размытие(15px))) { .dropdown_menu-dark { -webkit-backdrop-filter: размытие (15 пикселей); фоновый фильтр: размытие (15 пикселей); } В браузере Safari он видит вот так. Пример в браузере Safari
А вот как это выглядит в других мобильных браузерах (или как должно выглядеть) Пример других браузеров
Если вы скажете мне, в чем я ошибаюсь, или есть ли альтернативное решение для создания этого стиля размытого фона (кроме размещения размытого фонового изображения), это будет для меня большой помощью.
Заранее спасибо
Мобильная версия