背景幕滤镜无法使用 Safari 浏览器渲染

Question

我在一个名为"navigation":

的部分中有一个简单的标题

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

链接的CSS文件包含:

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

网格用于对齐三个图标。第一个是汉堡菜单，第二个是标志，最后一个是动作"立即预订"。

它在Google Chrome上呈现完美，但在Safari上根本不起作用。

有什么建议吗?

Answer 1

浏览器有时会出现CSS呈现问题，尤其是safari。尽量使用-webkit-filter。它最有可能解决你的问题。如果没有，请告诉我。