悬停元素时对盒阴影进行动画处理会在Edge上产生视觉毛刺

Question

当试图将元素悬停在一个元素上时，我试图给它添加动画效果，尽管它在所有浏览器上都可以正常工作，但它在Edge上还是有点毛病（至少从IE 11到Edge 18似乎是这样）。 / p>

毛刺看起来像一排（或一列）黑色破折号，通常只出现几帧，靠近动画元素但处于随机位置。

删除过渡属性或：hover规则集可解决此问题，但当然不是解决之道。

这里是重现故障的完整示例：

body {
    background-color: #f5f5f5;
    font-family: sans-serif;
}
ul {
    display: flex;
    list-style: none;
    margin: -5px;
    padding: 0;
}
ul > li {
    cursor: pointer;
    flex: 1 1 auto;
    padding: 20px;
    text-align: center;
    transition: box-shadow .2s ease;
    background-color: #fff;
    box-shadow: 0 6px 28px 2px rgba(112,113,115,0.5), 0 0 0 0 rgba(0,0,0,0.3);
    border-radius: 5px;
    margin: 5px;
}
ul > li:hover {
    box-shadow: 0 6px 28px 2px rgba(112,113,115,0.5), 0 0 0 4px rgba(0,0,0,0.3);
}

<ul>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
    <li>test 4</li>
</ul>

如果在所有<li>元素上真正快速移动光标，则可以更好地重现毛刺（似乎计算机越滞后，就越容易重现毛刺）。

那么，您是否知道如何解决此问题，同时保持悬停过渡？