backdrop-filter属性在Safari浏览器中无法渲染如何解决

按优先级排查修复以下问题即可：

• 补全webkit私有前缀：Safari全系列对backdrop-filter的实现均依赖webkit前缀，仅写标准属性无法被识别，必须同步添加-webkit-backdrop-filter声明。
• 设置非完全透明的背景：Safari触发backdrop-filter渲染的必要条件是元素本身不能为全透明背景，哪怕设置透明度极低的半透色都可以，全透明状态下浏览器会直接跳过模糊效果计算。
• 排查父元素堆叠上下文干扰：如果当前header的父元素.navigation设置了overflow: hidden、非none值的transform/filter/will-change属性，或是opacity值小于1，会生成独立堆叠上下文截断模糊渲染层，移除这类属性，或者将fixed定位的header移出.navigation区块、作为body直接子元素即可解决。

修正后的完整样式代码如下：

.navigation header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    /* 补全Safari需要的前缀 */
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
    /* 新增半透明背景，色值可根据设计需求调整，不可为全透明 */
    background: rgba(255, 255, 255, 0.06);
}

你当前使用的grid三列布局本身不会干扰backdrop-filter渲染，不需要调整布局相关代码。

内容的提问来源于stack exchange，提问作者Vulkan