Position of Button Changes on Hover in Safari - html

Question

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.
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.
This is the HTML structure of the button:
<a class='icon-button'>
<button>
<span class='bg'></span>
<span class='icon'>A</span>
</button>
</a>
This is the SCSS code I am applying:
.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%;
}
}
Here is a JSFiddle page where I replicated the issue with the relevant code: https://jsfiddle.net/Auroratide/6u463jL5/3/
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.
UPDATE:
Here a link to a video of what I am seeing, contrasting Firefox with Safari:
http://tarm.wdfiles.com/local--files/files/safari_jankiness.mov

Answer 1

Try adding
-webkit-transition: width 128ms linear, height 128ms linear;
The -webkit- refers to browsers such as Chrome and Safari, so will hopefully fix the problem you're experiencing.

Answer 2

It seems that the below CSS fixes this:
.icon-button {
position: relative;
}
.icon-button button {
position: absolute;
top: 0; left: 0;
}
I'm still not really sure what was going on in Safari, but it seems to have been a positioning issue relative to the size of adjacent elements (I had noticed the issue does not arise on a button in isolation). Absolute positioning guarantees the elements are positioned based solely on the parent, so I'm guessing that's why this fixes the issue.