Safari Box-Shadow：什么是干扰？

Question

我在网站上有三个菜单，其行为方式类似，但其中两个菜单在safari中被破坏。我没有建立这个网站，但我目前正在进行升级，所以我希望一双新的眼睛会有所启发。

我将比较工作和非工作导航菜单，并讨论我到目前为止所研究的内容。

（请注意：这是悬停效果）

工作示例：

#main-navigation ul li a {
display: block;
text-align: center;
width: 130px;
height: 130px;
line-height: 128px;
font-size: 20px;
border: 1px solid #fff;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
color: #fff;
text-transform: uppercase;
transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-ms-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}

#main-navigation ul li a:hover {
background: #359ed6;
text-decoration: none;
border: 1px solid #8ec9e8;
box-shadow: 0 0 40px #6db2d7;
-moz-box-shadow: 0 0 40px #6db2d7;
-webkit-box-shadow: 0 0 40px #6db2d7;
-o-box-shadow: 0 0 40px #6db2d7;
}

破碎的例子：

#work .tab-strips {
text-align: center;
margin-bottom: 20px;
padding-bottom: 58px;
border-bottom: 1px solid #275871;
padding-top: 50px;
}

#work .tab-strips li {
display: inline-block;
margin: 0 -15px;
vertical-align: top;
position: relative;
}

#work ul li a {
overflow: hidden;
display: table;
text-align: center;
width: 225px;
height: 225px;
border: 1px solid #fff;
border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-ms-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
font-size: 20px;
color: #fff;
line-height: 30px;
font-weight: 200;
}

#work ul li a:hover {
background: #359ed6;
text-decoration: none;
border: 1px solid #8ec9e8;
box-shadow: 0 0 40px #6db2d7;
-moz-box-shadow: 0 0 40px #6db2d7;
-webkit-box-shadow: 0 0 40px #6db2d7;
-o-box-shadow: 0 0 40px #38434a;
}


#work .tab-strips li a span {
display: table-cell;
vertical-align: middle;
}

#work .tab-strips li.active a {
border: 1px solid #223541;
color: #223541;
}

我已经研究并了解到Safari只支持从桌面版本5.1开始的无前缀版本的box-shadow，我将其包含在#work ul li a:hover...中，所以我不相信这是原因。

悬停效果适用于Chrome，IE和Firefox中的所有情况。

在Safari的转换代码中括号前没有间距，这也不是原因。

我希望这个问题能够表明思想，并且我不会错过任何明显的东西。我查看了 Safari Developer Library ，但未找到任何解决方案。