'Backdrop-filter: blur + box-shadow not rendering properly in Safari

I've tried using the CSS backdrop-filter: blur combined with the box-shadow property but the final result doesn't seem to be rendered properly in Safari.
I'm using macOS 10.15 Catalina and Safari 13.0.2 and I've also noticed that the same code snippet renders fine in Chrome.

Unfortunately the ::before and ::after solution that a user posted here cannot be applied to input fields or to elements containg text inside.

If you're using Safari you can understand better what I'm talking about by looking at my webisite in which I've first faced this issue: https://cristiandavideconte.github.io/myPersonalWebPage/

I'll leave a portion of code that you can use to reproduce this issue:

            body {
                display:flex;
                justify-content:center;
                background-image: url("https://wallup.net/wp-content/uploads/2014/10/nature/Sunset_Mountain_And_Lake_Free_Download.jpg");
                background-repeat: no-repeat;
                background-size: 100% 200%;
            }
            
            p {
                color: white;
                margin:0;
                font-size:190%;
            }
            
            #presentationCard {
                height:60vmin;
                width:55vmin;
                -webkit-box-shadow:0 0 0.5rem 0 rgba(0,0,0,1);
                box-shadow:0 0 0.5rem 0 rgba(0,0,0,1);
                overflow-x:hidden;
                overflow-y:scroll;  
                border-radius:5%;
                background:rgba(0,0,0,0.3);
                -webkit-backdrop-filter:blur(2rem) saturate(130%);
                backdrop-filter:blur(2rem) saturate(130%);
                -webkit-transform:translate3d(0, calc(50vh - 60vmin / 2), 0);
                transform:translate3d(0, calc(50vh - 60vmin / 2), 0);
                overscroll-behavior:none;
            }

            #presentationCard::-webkit-scrollbar {
                display:none;
            }

            #presentationCard p {
                margin:calc(0.25 * 17vmin);
                backface-visibility:hidden;                     
            }
    <body>
        <div id = "presentationCard">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nunc lorem, quis commodo elit interdum vitae. Aliquam malesuada erat at dictum pretium. Donec pellentesque sed metus id commodo. Vivamus luctus erat non dui consequat, a tincidunt eros luctus. Vestibulum vel imperdiet risus, congue vehicula massa. Proin non iaculis nisl. Nam iaculis, libero ac accumsan bibendum, augue ante blandit mi, quis ullamcorper lacus metus eget risus. Duis in pretium sem.
                Sed suscipit porttitor odio, ac auctor quam. Praesent gravida vulputate tortor id cursus. Nulla imperdiet luctus purus, vel suscipit ante lacinia vitae. Cras in quam dignissim, lacinia diam non, tristique purus. Curabitur sit amet risus a augue gravida accumsan ac vel massa. Nulla semper magna felis, ut malesuada ex semper quis. Suspendisse venenatis interdum turpis eget facilisis. Donec tincidunt, purus pharetra convallis volutpat, ante ex venenatis erat, et ultricies justo magna a tortor. Pellentesque commodo nisi mi, non lobortis velit cursus id. Praesent venenatis, tortor quis gravida gravida, tellus metus consectetur massa, non fermentum nisl massa nec nunc. Etiam sapien tortor, aliquam sed diam non, bibendum pellentesque neque. Curabitur facilisis sapien vel mollis viverra. Phasellus at aliquet eros. Curabitur suscipit, lorem in pellentesque consectetur, quam nulla hendrerit sem, quis congue odio elit vitae nulla. Sed viverra mauris eget elit elementum fringilla.
            </p>
        </div>  
    </body>

Comparison between Chrome (on the right) and Safari (on the left) rendering the code above

Zoomed version of Safari's rendering

csssafarimarginblur


Solution 1:[1]

It turned out to be a specific Safari 13.0 (MacOs Catalina and older versions) bug.
It has been solved with the BigSur update.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cristian Davide Conte

Related Questions