背景过滤器不使用 Safari 渲染

Question

我在名为“导航”的部分中有一个简单的标题：

<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);
}

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

它在谷歌浏览器上完美呈现，但在 Safari 上它根本不起作用。

有什么建议么？

Answer 1

浏览器有时会出现 CSS 渲染问题，尤其是 safari。 尝试使用-webkit-filter 。 它最有可能解决您的问题。 如果没有，请更新我。