backdrop-filter doesn't render with Safari

Question

I have a simple header in a section named "navigation":

<section class="navigation">
    <header>
        ...
    </header>
</section>

The CSS filed linked contains this:

.navigation header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    backdrop-filter: blur(40px);
}

The grid is used to align three icons. The first is for a burger menu, the second is the logo and the last one is an action "Book Now".

It renders perfectly on Google Chrome but with Safari it doesn't work at all.

Any suggestions?

Answer 1

Browsers sometimes have rendering problems with the CSS especially safari. Try to use -webkit-filter . It will solve your problem most likely. If not, please update me.