Html Safari中悬停按钮的位置更改

我的目标是制作一个圆形图标按钮，其中一个图标被一个圆圈包围，圆圈在悬停时缩小，但图标保持居中

我在Firefox和Chrome上都有这种效果，但在Safari 9中（我想这与Safari 10中类似），当我将鼠标悬停在按钮上时，它们的垂直位置偶尔会意外地上下移动。这似乎主要发生在快速更改悬停的按钮时

这是按钮的HTML结构：

<a class='icon-button'>
  <button>
    <span class='bg'></span>
    <span class='icon'>A</span>
  </button>
</a>

下面是一个JSFIDLE页面，我在其中用相关代码复制了该问题：

有人知道Safari中发生这种情况的原因，但不知道其他浏览器的原因吗？我可能需要改变我的策略，这样CSS就不会像jank那样，但我还是很好奇

更新：

下面是我所看到的对比Firefox和Safari的视频链接：

尝试添加

-webkit-transition: width 128ms linear, height 128ms linear;

webkit指的是诸如Chrome和Safari之类的浏览器，因此有望解决您遇到的问题

尝试添加

-webkit-transition: width 128ms linear, height 128ms linear;

---

webkit指的是诸如Chrome和Safari之类的浏览器，因此有望解决您遇到的问题

下面的CSS似乎解决了这个问题：

.icon-button {
  position: relative;
}

.icon-button button {
  position: absolute;
  top: 0; left: 0;
}

---

我仍然不确定Safari中到底发生了什么，但这似乎是一个相对于相邻元素大小的定位问题（我注意到这个问题并不是孤立地出现在按钮上）。绝对定位保证元素完全基于父元素进行定位，因此我猜这就是为什么解决了这个问题。

下面的CSS似乎解决了这个问题：

.icon-button {
  position: relative;
}

.icon-button button {
  position: absolute;
  top: 0; left: 0;
}

---

我仍然不确定Safari中到底发生了什么，但这似乎是一个相对于相邻元素大小的定位问题（我注意到这个问题并不是孤立地出现在按钮上）。绝对定位保证元素的定位完全基于父元素，所以我猜这就是为什么解决了这个问题。

它仍然存在问题）：我刚刚在上面的帖子中上传了一个视频，展示了我在Firefox和Safari中看到的内容。此外，我尝试完全移除过渡，但仍然遇到相同的问题，尽管程度较低。啊，我现在看到了问题所在，我认为实际的过渡效果不起作用（不是定位问题）。你发布的答案解决了问题吗？是的，解决了。谢谢你看了！它仍然存在问题）：我刚刚在上面的帖子中上传了一段视频，展示了我在Firefox和Safari中看到的东西。此外，我尝试完全移除过渡，但仍然遇到相同的问题，尽管程度较低。啊，我现在看到了问题所在，我认为实际的过渡效果不起作用（不是定位问题）。你发布的答案解决了问题吗？是的，解决了。谢谢你看了！