Фоховая фильтра размытие не рендеринга на сафари ⇐ CSS

[Anonymous]

При предварительном просмотре моего веб-сайта в Safari (мобильный и настольный компьютер) существуют странные проблемы с рендерингом с фоновым фильтром: blur (); . Я использую PostCSS с помощью плагина AutoPrefixer , поэтому код генерирует соответствующий префикс поставщика для фонефильтра . Я проверил это, проверив как каталог Build , так и используя инструменты разработчика в Safari.


Вот фрагмент HTML /CSS, вызывающий это:

< div class = "snippet-code">

Код: Выделить всё

    .border {
--blur: 20px;
--margin: 10px;
backdrop-filter: blur(var(--blur));
width: calc(100vw - var(--margin) * 2);
height: calc(100vh - var(--margin) * 2);
margin: var(--margin);
border-image:  u r l ( ' d a t a : i m a g e / s v g + x m l , & l t ; s v g   w i d t h = " 2 6 1 "   h e i g h t = " 2 6 1 "   v i e w B o x = " 0   0   2 6 1   2 6 1 "   f i l l = " n o n e "   x m l n s = " h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g " & g t ; & l t ; g   c l i p - p a t h = " u r l ( % 2 3 c l i p 0 _ 1 8 2 _ 2 7 8 3 ) " & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 2 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 2 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 2 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 2 2 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 2 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 2 1 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 1 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 2 0 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 0 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 9 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 9 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 7 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 7 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 6 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 6 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 5 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 5 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 4 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 4 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 1 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 2 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 2 2 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 2 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 2 1 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 1 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 2 0 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 2 0 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 9 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 9 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 7 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 7 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 6 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 6 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 5 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 5 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 4 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 4 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 5 1 "   y 1 = " 1 8 0 . 7 5 "   x 2 = " 2 3 1 "   y 2 = " 1 8 0 . 7 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 "   s t r o k e - w i d t h = " 0 . 5 " / & g t ; & l t ; l i n e   x 1 = " 2 5 1 "   y 1 = " 1 8 1 . 2 5 "   x 2 = " 2 3 1 "   y 2 = " 1 8 1 . 2 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 "   s t r o k e - w i d t h = " 0 . 5 " / & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 1 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 1 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 2 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 2 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 1 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 1 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 0 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 0 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 9 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 9 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 7 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 7 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 6 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 6 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 5 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 5 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 4 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 4 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 5 1 "   y 1 = " 8 0 . 2 5 "   x 2 = " 2 3 1 "   y 2 = " 8 0 . 2 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 "   s t r o k e - w i d t h = " 0 . 5 " / & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 1 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 2 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 2 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 1 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 1 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 1 0 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 1 0 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 9 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 9 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 7 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 7 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 6 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 6 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 5 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 5 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 4 1 "   y 1 = " 4 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 4 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 5 1 "   y 1 = " 8 0 . 2 5 "   x 2 = " 2 3 1 "   y 2 = " 8 0 . 2 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 "   s t r o k e - w i d t h = " 0 . 5 " / & g t ; & l t ; l i n e   x 1 = " 2 5 1 "   y 1 = " 8 0 . 7 5 "   x 2 = " 2 3 1 "   y 2 = " 8 0 . 7 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 "   s t r o k e - w i d t h = " 0 . 5 " / & g t ; & l t ; l i n e   x 1 = " 2 6 1 "   y 1 = " 3 0 . 5 "   x 2 = " 2 3 1 "   y 2 = " 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   y 1 = " 3 0 . 5 "   x 2 = " 3 0 "   y 2 = " 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 4 0 . 5 "   x 2 = " 3 0 "   y 2 = " 4 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 5 0 . 5 "   x 2 = " 3 0 "   y 2 = " 5 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 6 0 . 5 "   x 2 = " 3 0 "   y 2 = " 6 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 7 0 . 5 "   x 2 = " 3 0 "   y 2 = " 7 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 9 0 . 5 "   x 2 = " 3 0 "   y 2 = " 9 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 0 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 0 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 1 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 1 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 2 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 2 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   y 1 = " 1 3 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   y 1 = " 3 0 . 5 "   x 2 = " 3 0 "   y 2 = " 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 4 0 . 5 "   x 2 = " 3 0 "   y 2 = " 4 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 5 0 . 5 "   x 2 = " 3 0 "   y 2 = " 5 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 6 0 . 5 "   x 2 = " 3 0 "   y 2 = " 6 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 7 0 . 5 "   x 2 = " 3 0 "   y 2 = " 7 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 9 0 . 5 "   x 2 = " 3 0 "   y 2 = " 9 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 0 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 0 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 1 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 1 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 2 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 2 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 1 0 "   y 1 = " 8 0 . 2 5 "   x 2 = " 3 0 "   y 2 = " 8 0 . 2 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 "   s t r o k e - w i d t h = " 0 . 5 " / & g t ; & l t ; l i n e   x 1 = " 1 0 "   y 1 = " 7 9 . 7 5 "   x 2 = " 3 0 "   y 2 = " 7 9 . 7 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 "   s t r o k e - w i d t h = " 0 . 5 " / & g t ; & l t ; l i n e   y 1 = " 1 3 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   y 1 = " 1 3 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 4 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 4 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 5 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 5 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 6 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 6 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 7 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 7 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 9 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 9 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 2 0 0 . 5 "   x 2 = " 3 0 "   y 2 = " 2 0 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 2 1 0 . 5 "   x 2 = " 3 0 "   y 2 = " 2 1 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 2 2 0 . 5 "   x 2 = " 3 0 "   y 2 = " 2 2 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   y 1 = " 2 3 0 . 5 "   x 2 = " 3 0 "   y 2 = " 2 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   y 1 = " 1 3 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 3 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i n e   x 1 = " 2 0 "   y 1 = " 1 4 0 . 5 "   x 2 = " 3 0 "   y 2 = " 1 4 0 . 5 "   s t r o k e = " % 2 3 6 6 6 6 6 6 " / & g t ; & l t ; l i ne x1="20" y1="150.5" x2="30" y2="150.5" stroke="%23666666"/>')  80 fill / 80px round;
padding: 60px;

& div {
width: 100%;
height: 100%;

/* Temporary styles */
display: grid;
place-items: center;

&::before {
--transition: 35%;
--opacity: 50%;
content: '';
position: absolute;
inset: 0;
z-index: -1;
backdrop-filter: blur(var(--blur));
mask-image: linear-gradient(to top, black var(--transition), transparent 100%);
}
}
}< /code>


Hello World!

Трудно выявить проблему и/или внести изменения в CSS, который удаляет эффект размытия градиента фона, который я пытаюсь создать.
Некоторые из моих первоначальных тестов заставляют меня поверить, что это либо проблема с псевдоклассом ::before , z-индекс: -1; или размытие() сам по себе.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -on-safari