Safari动画问题

Question

我正在为我的网页做一个菜单图标，在每个浏览器上看起来都很好，除了在safari上我从状态到悬停状态的变化都有一些奇怪的动画。

这是显示问题的JSfiddle：

https://jsfiddle.net/x5vdt0L7/3/

CSS

#menuIcon {
    width: 12vw;
    height: 12vw;
    background: url("https://tresastronautas.com/assets/menuBlueHover.svg") no-repeat;
    background-size: cover;
    float: left;
    display: inline-block;
    transition: all 0.25s ease;
    -webkit-transition: background 0.25s ease;
}
#menuIcon:hover {
    background: url("https://tresastronautas.com/assets/menuBlue.svg") no-repeat;
    cursor: pointer;
}

HTML

<div id="menuIcon"></div>

基本上发生的事情是，当用户将鼠标悬停在div上时，我正在改变div的背景，但是当发生这种情况时，新背景的加载大于div，然后调整到div，所以它看起来真的很棒凌乱。