css - 框阴影与过渡的不一致行为

Question

我有一个按钮，它会在 hover 上显示一个 box-shadow。它还有一个 transition。我的问题是，它并不总是显示相同的结果，有时 box-shadow 会偏移几个 px，而不是在所有边上都相等，如图所示:

下面是我的代码，这里是 JSFiddle演示。

div{
  width:100px;
  height:25px;
  transition:.2s;
  background:lightgrey;
  border-radius:25px;
}

div:hover{
  box-shadow:0px 0px 10px green;
}

<div></div>

如您所见，如果您删除 transition，box-shadow 会正确显示。

div{
  width:100px;
  height:25px;
  background:lightgrey;
  border-radius:25px;
}

div:hover{
  box-shadow:0px 0px 10px green;
}

<div></div>

对我来说更有趣的是 JSFiddle 演示，在删除和粘贴一些代码后显示不同的输出，同时保持整体不变，或者再次运行相同的代码，或减少转换时间。我很难解释如何重现这个，但如果你玩一下，你可能会自己看到它。我的问题是如何保持一致，最重要的是如何在保持过渡的同时保持 box-shadow 相等。

@编辑

Video of issue

我还制作了一段视频，展示了我是如何看待差异的，因为有些人报告说没有发现任何问题。有没有可能是我的屏幕出了问题？ (希望问题在视频中可见，否则我可能会发疯)

@edit2

看来是浏览器的问题。最初我在最新的 Chrome 版本上遇到了这个问题，无法在最新的 Firefox 上重现这个问题。在发现感谢评论后，我已经将 webkit 前缀添加到 transition 和 box-shadow 但它没有解决问题。

Answer 1

正如您所说，这似乎是一个错误，但要克服这个问题，您可以使用伪元素以不同的方式进行操作，在该伪元素中应用框阴影，但为另一个属性(比例、不透明度、宽度/高度等)设置动画

div.box{
  width:100px;
  height:25px;
  margin:10px;
  background:lightgrey;
  border-radius:25px;
  position:relative;
}
div.box::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  box-shadow:0 0 10px green;
  border-radius:inherit;
  transition:.2s;
  transform:scale(0.8);
}

div.box:hover::before{
  transform:scale(1);
}

<div class="box"></div>