为什么当标准阴影没有时，盒子阴影在过渡时会闪烁？

Question

为什么过渡期间插入框阴影会闪烁？删除插图时它不会晃动。

Codepen.io demo

.main-nav li{
    padding: 15px 20px;

}

.slide{
    transition: .25s;
}

.slide:hover{
    box-shadow: inset 200px 0 0 0 teal;
}

Answer 1

我能够在自己的Chrome 79.0.3945.79网站上重现此错误

在使用Firefox Developer Edition和Edge时，我没有遇到这个问题，在低于3410px的分辨率上也没有出现此问题，高度对此没有任何影响...

编辑：

经过更多测试后，我发现您可以通过更改父元素的宽度来解决此问题。我的3410px陈述为假，但这恰好是匹配的。