backdrop-filter doesn't render with Safari-CodePudding

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

<section >
    <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?

CodePudding user response：

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.