title: Position of Button Changes on Hover in Safari
body: <p>My goal is to make a circular icon button wherein a single icon is enveloped by a circle, and the circle shrinks on hover, but the icon stays centered.</p>
  
  <p>I got this effect working in Firefox and Chrome, but in Safari 9 (I assume it's similar in Safari 10), when I hover over the buttons, their vertical position occasionally moves up and down unexpectedly.  It seems to mostly occur when rapidly changing which button is being hovered.</p>
  
  <p>This is the HTML structure of the button:</p>
  
  <pre><code>&lt;a class='icon-button'&gt;
    &lt;button&gt;
      &lt;span class='bg'&gt;&lt;/span&gt;
      &lt;span class='icon'&gt;A&lt;/span&gt;
    &lt;/button&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>This is the SCSS code I am applying:</p>
  
  <pre><code>.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;
    }
  
    &amp;:hover .bg {
      width: 0.8 * $width;
      height: 0.8 * $width;
    }
  
    .icon {
      color: #FFF;
      position: absolute;
      top: 0;
      left: 0;
      line-height: $width;
      width: 100%;
    }
  }
  </code></pre>
  
  <p>Here is a JSFiddle page where I replicated the issue with the relevant code: <a href="https://jsfiddle.net/Auroratide/6u463jL5/3/" rel="nofollow noreferrer">https://jsfiddle.net/Auroratide/6u463jL5/3/</a></p>
  
  <p>Does anyone know what is causing this to happen in Safari but not the other browsers?  I'm probably going to need to change my strategy so the CSS is not as jank, but I'm curious nonetheless.</p>
  
  <p><em>UPDATE:</em></p>
  
  <p>Here a link to a video of what I am seeing, contrasting Firefox with Safari:</p>
  
  <ul>
  <li><a href="http://tarm.wdfiles.com/local--files/files/safari_jankiness.mov" rel="nofollow noreferrer">http://tarm.wdfiles.com/local--files/files/safari_jankiness.mov</a></li>
  </ul>