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

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

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

我的网站上有一个悬停菜单，子菜单顶部有一个小箭头。我使用了

左边框

、

右边框

和

边框底部

。我尝试对伪元素箭头应用与对子菜单本身应用相同的背景过滤器，但这导致每次我将鼠标悬停在主菜单链接上时都会出现闪烁的颜色。有时它们可以正常工作，但取决于它们在背景图像上的位置，在不同的视口宽度下，此问题始终会发生

菜单链接1

子菜单链接1
子菜单链接2
子菜单链接3
子菜单链接4
子菜单链接5



身体{
背景图片：url(http://www.lucieaverillphotography.co.uk/wp-content/uploads/2017/01/15974858_10154941714967990_2444361563480701659_o.jpg);
背景尺寸：封面；
}
.标题{
位置：绝对位置；
高度：55px；
宽度：100%；
}
导航ul{
显示器：flex；
高度：55px；
保证金：0；
填充：0；
}
李国荣{
填充：10px；
列表样式：无；
颜色：#fff；
}
导航ul{
位置：绝对位置；
最高：100%；
左：10px；
z指数：10；
显示：块；
最小宽度：185px；
高度：自动；
填充：2px0px；
背景色：#ffffff；
不透明度：0；
指针事件：无；
背景色：rgba（255、255、255、0.5）；
-webkit背景滤镜：模糊（7px）饱和（200%）；
背景滤镜：模糊（7px）饱和（200%）；
边框样式：无；
过渡：不透明度0.5s到0.0s；
}
导航ulli：悬停ul{
指针事件：自动；
不透明度：1；
}
海军：以前{
内容：“；
位置：绝对位置；
z指数：1；
底部：100%；
左：26px；
页边顶部：-2px；
左边框：10px实心透明；
右边框：10px实心透明；
边框底部：10px实心rgba（255、255、255、0.5）；
-webkit背景过滤器：模糊（7px）饱和（200%）；
背景滤镜：模糊（7px）饱和（200%）；
}
李国宝{
颜色：#444；
}

在伪“导航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背景滤镜：模糊（7px）饱和（200%）

背景滤镜：模糊（7px）饱和（200%）

办理狩猎登记手续

---

这应该可以解决问题。

您使用的是哪个版本的safari？我使用的是10.0.2版，我的Mac电脑已经有一段时间在监听我的更新了，所以可能就是这样。嗨，是的，我知道是过滤器导致了故障，所以删除它们显然会阻止故障的发生，但是我添加它们是因为我想在pseudo元素上使用它们，否则它与子菜单不匹配。

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);
}