-webkit-backdrop-filter 在 Safari 上不起作用

Question

Safari 14.1.2 未显示

-webkit-backdrop-filter: blur(10px);

我尝试过多个版本，内联，使用 jQuery，使用

@supports

但没有任何效果。 最奇怪的是，它在 Safari 的“Web Inspector”中显示为已启用，并且如果我将其关闭并再次打开，它就会工作。解决办法是什么？有什么解决办法吗？

Answer 1

这里，

我也有同样的问题。 我的问题是我一开始不“可见”的div。 （从下到上的幻灯片动画）

 div{
            height: 0px,
            bottom: 0px,
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    }

我的解决方案是：

  div{
                height: 1px,
                bottom: -1px,
                -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
        }

现在可以了。

我希望这是您的解决方案。

您好， 西梅尔

Answer 2

如果您希望

[--webkit-]backdrop-filter

正常工作，您的 HTML 元素必须在初始渲染时使用实际的

height

和

weight

进行渲染，即使只是

height: 1px; weight: 1px

样式设置；

我之前的代码：

.mobile-nav {
  position: fixed;
  top: 0;
  heigth: 0px;
  width: 0px;
  background-color: rgba(255,255,255, 0.8);
  backdrop-filter: blur(8px);
  --webkit-backdrop-filter: blur(8px);
  transition: height .5s;
}
// button click event fired, and change classList
.mobile-nav.opened {
  heigth: 72px;
  width: 100vw;
}

我的代码（

backdrop-filter

在IOS Safari上工作）：

.mobile-nav {
  position: fixed;
  top: -72px;
  heigth: 72px;
  width: 100vw;
  background-color: rgba(255,255,255, 0.8);
  backdrop-filter: blur(8px);
  --webkit-backdrop-filter: blur(8px);
  transition: height .5s;
}
// button click event fired, and change classList
.mobile-nav.opened {
  top: 0;
}

希望这对您有用。