在 Safari 中悬停时按钮的位置发生变化答案

【问题标题】：Position of Button Changes on Hover in Safari在 Safari 中悬停时按钮的位置发生变化
【发布时间】：2017-07-21 01:24:58
【问题描述】：

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

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

这是按钮的 HTML 结构：

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

这是我正在应用的 SCSS 代码：

.icon-button {
  $width: 2em;

  display: inline-block;
  width: $width;
  height: $width;
  overflow: hidden;
  cursor: pointer;

  button {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    width: $width;
    height: $width;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .bg {
    background-color: #FF9999;
    width: $width;
    height: $width;
    border-radius: $width / 2;
    margin: 0 auto;
    transition: width 128ms linear, height 128ms linear;
  }

  &:hover .bg {
    width: 0.8 * $width;
    height: 0.8 * $width;
  }

  .icon {
    color: #FFF;
    position: absolute;
    top: 0;
    left: 0;
    line-height: $width;
    width: 100%;
  }
}

这是一个 JSFiddle 页面，我在其中使用相关代码复制了该问题：https://jsfiddle.net/Auroratide/6u463jL5/3/

有谁知道是什么原因导致 Safari 发生这种情况，但其他浏览器不知道？我可能需要改变我的策略，这样 CSS 才不会那么卡顿，但我还是很好奇。

更新：

这里是我看到的视频的链接，对比 Firefox 和 Safari：

http://tarm.wdfiles.com/local--files/files/safari_jankiness.mov

【问题讨论】：

标签： html css safari

【解决方案1】：

尝试添加

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

-webkit- 指的是 Chrome 和 Safari 等浏览器，因此有望解决您遇到的问题。

【讨论】：

它仍然存在问题）：我刚刚在上面的帖子中上传了一个视频，展示了我在 Firefox 和 Safari 中看到的内容。此外，我尝试完全删除过渡，但仍然遇到同样的问题，尽管程度较轻。
啊，我知道问题出在哪里了，我认为是实际的过渡效果不起作用（不是定位问题）。您发布的答案是否解决了问题？
是的，确实如此。不过感谢您的关注！

【解决方案2】：

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

.icon-button {
  position: relative;
}

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

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

【讨论】：