IOS Safari中backdrop-filter属性失效问题排查及替代方案咨询

一、先修复语法错误 #

你提供的代码中，@supports规则未闭合（缺少一个}），这会导致整个backdrop-filter样式块被浏览器忽略，这大概率是Safari中效果失效的核心原因。修正后的代码如下：

/* Dropdown menu */
.dropdown_menu-dark {
  display: none;
  position: absolute;
  z-index: 10;
  right: 2rem;
  top: 60px;
  width: 300px;
  height: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown_menu-dark.open {
  height: 300px;
}

/* 修复闭合的@supports规则 */
@supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
  .dropdown_menu-dark {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
  }
} /* 新增该闭合括号 */

二、Safari特有的兼容调整 #

若修复语法后仍有问题，针对Safari的backdrop-filter特性，还需注意以下细节：

• 避免初始高度为0的过渡：Safari对高度从0切换到非0的元素，可能无法正确触发backdrop-filter渲染。可改用opacity+visibility配合高度过渡，或用极小初始高度替代height:0：

  .dropdown_menu-dark {
    /* 替换height:0为 */
    height: 1px;
    opacity: 0;
    visibility: hidden;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s, visibility 0.2s;
  }
  
  .dropdown_menu-dark.open {
    height: 300px;
    opacity: 1;
    visibility: visible;
  }
  

• 处理overflow:hidden与backdrop-filter的冲突：Safari中同时设置overflow:hidden和backdrop-filter时，模糊效果可能被压制。可将overflow:hidden移到菜单子容器，或用clip-path实现圆角替代border-radius + overflow:hidden：

  .dropdown_menu-dark {
    /* 移除overflow:hidden */
    clip-path: inset(0 round 10px); /* 实现圆角 */
  }
  

三、无backdrop-filter的替代方案 #

如果以上调整仍不生效，可通过伪元素模拟模糊背景（无需额外图片）：

.dropdown_menu-dark {
  /* 移除原有backdrop-filter相关设置 */
  background-color: transparent; /* 设为透明 */
  position: relative;
  z-index: 10;
}

.dropdown_menu-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  filter: blur(15px);
  z-index: -1;
  border-radius: 10px;
}

注意：该方案需确保菜单父元素有overflow:hidden，或伪元素不会超出菜单范围，同时调整层级避免模糊层覆盖菜单内容。

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