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

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

;123;1,;678;4

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

Answer 2

尝试添加

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

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

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

2 个答案: