css - 使用背景滤镜时 Safari 出现故障

Question

在伪元素上使用背景滤镜时，我遇到了一系列奇怪的故障。我正在使用模糊和饱和滤镜。

我知道这是相对较新的 CSS，据我所知只有 Safari 支持，但我想知道是否有人遇到过类似的问题，是否有解决方法？

我的网站上有一个悬停菜单，其中子菜单的顶部有一个小箭头。我使用 border-left、border-right 和 border-bottom 制作了这个。我尝试将相同的背景过滤器应用于我应用于子菜单本身的伪元素箭头，但这会导致每次我将鼠标悬停在主菜单链接上时出现故障颜色。有时它们工作正常，但根据它们在背景图像上的定位，这个问题确实会在各种视口(viewport)宽度下持续出现。

https://jsfiddle.net/fm1cg4n4/4/

<header class="header">

  <nav class="menu">

    <ul>

      <li>Menu Link 1
        <ul>
          <li>Submenu Link 1</li>
          <li>Submenu Link 2</li>
          <li>Submenu Link 3</li>
          <li>Submenu Link 4</li>
          <li>Submenu Link 5</li>
        </ul>
      </li>

    </ul>

  </nav>

</header>

body {
  background-image: url(http://www.lucieaverillphotography.co.uk/wp-content/uploads/2017/01/15974858_10154941714967990_2444361563480701659_o.jpg);
  background-size:cover;
}

.header {
  position:absolute;
  height:55px;
  width:100%;
}

nav ul {
  display:flex;
  height:55px;
  margin:0;
  padding:0;
}

nav ul li {
  padding:10px;
  list-style:none;
  color:#fff;
}

nav ul ul {
  position:absolute;
  top:100%;
  left:10px;
  z-index:10;
  display:block;
  min-width:185px;
  height:auto;
  padding: 2px 0px;
  background-color:#ffffff;
  opacity:0;
  pointer-events:none;

  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(7px) saturate(200%);
    backdrop-filter: blur(7px) saturate(200%);
  border-style:none;

  transition: opacity 0.5s ease 0s;
}

nav ul li:hover ul {
  pointer-events:auto;
  opacity:1;
}

nav ul ul:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 26px;
  margin-top: -2px;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(7px) saturate(200%);
  backdrop-filter: blur(7px) saturate(200%);
}

nav ul ul li {
  color:#444;
}

Answer 1

在伪“nav ul ul:before”中删除过滤器。将您的 CSS 更新为以下内容:

nav ul ul:before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 26px;
  margin-top: -2px;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(255, 255, 255, 0.5);
}

删除:

-webkit-backdrop-filter: blur(7px) saturate(200%);

backdrop-filter: blur(7px) saturate(200%);

检查 https://jsfiddle.net/codeMonk/fm1cg4n4/5/在 Safari 中。

这应该可以完成工作。