背景滤镜在 Safari IOS 上不起作用

Question

我正在从事网络投资组合工作，我为移动视图实现了一个下拉菜单。该下拉菜单具有使用背景过滤器属性制作的模糊背景。它在除 Safari 之外的所有移动浏览器中都能完美运行。我不知道我做错了什么：c 这是我的下拉菜单风格

/* 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;
}

/* HERE IS WHERE I SET THE BACKDROP FILTER */
@supports ((-webkit-backdrop-filter: blur(15px)) or (backdrop-filter: blur(15px))) {
  .dropdown_menu-dark {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
  }

这就是它在 Safari 浏览器中看到的样子

这是它在其他移动浏览器中的外观（或者应该是什么样子）

如果你能告诉我哪里出错了，或者是否有其他解决方案来创建这种模糊的背景样式（除了放置模糊的背景图像），这对我来说会有很大的帮助。

提前致谢

Answer 1

确保检查您的版本是否支持背景过滤器。截至 2022 年 1 月我的最后一次知识更新，Safari 已部分支持背景过滤器，但并非所有版本都支持。

在这里您可以轻松查看哪个版本的浏览器支持背景过滤器。

https://caniuse.com/?search=backdrop-filter