html - 在 Safari 中悬停时按钮的位置发生变化

Question

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

我在 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

Answer 1

尝试添加

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

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