具有过渡的盒影行为不一致

Question

我有一个按钮，它将在box-shadow上显示一个hover。它还有一个transition。我的问题是，它并不总是显示相同的结果，有时box-shadow会偏移几像素，并且在各面上都不相等，如图所示：

下面是我的代码，这是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相等。

@edit

Video of issue

我还制作了一段关于如何看待差异的视频，因为有人报告说看不到任何问题。完全有可能是我的屏幕出现故障了吗？ （希望该问题在视频中可见，或者我可能会发疯）

@ edit2

似乎是浏览器问题。最初，我在最新的Chrome版本上遇到了该问题，无法在最新的Firefox上重新解决该问题。在发现了感谢注释之后，我在transition和box-shadow中添加了webkit前缀，但是并不能解决问题。

Answer 1

正如您所说，这似乎是一个错误，但要解决此问题，您可以使用伪元素以不同的方式进行处理，在该伪元素中应用盒子阴影，但可以设置另一个属性（比例，不透明度，宽度/高度等）的动画< / p>

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>