使用背景过滤器时Safari中出现故障

Question

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

我知道这是一个相对较新的CSS，只有在我阅读的情况下才得到Safari的支持，但我想知道是否有人遇到过类似的问题，以及是否有针对此问题的解决方法？

我的网站上有一个悬停菜单，其中子菜单顶部有一个小箭头。我使用border-left，border-right和border-bottom制作了此内容。我尝试将相同的背景滤镜应用到我已应用于子菜单本身的伪元素箭头，但这会导致每次将鼠标悬停在主菜单链接上时出现毛刺颜色。有时它们可​​以正常工作，但根据它们在背景图像上的位置，这个问题会在各种视口宽度下始终发生。

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

在伪导航中：之前＆＃39;删除过滤器。将您的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：模糊（7px）饱和（200％）;

在safari中查看https://jsfiddle.net/codeMonk/fm1cg4n4/5/。

这应该可以胜任。