Safari animation issue

Asked Oct 12 '17 at 11:52

Active Oct 12 '17 at 11:52

Viewed 222 times

Im doing a menu icon for my webpage, which on every browser looks good except on safari where I'm having some weird animations on the change of state from normal to hover.

Here is the JSfiddle which shows the problem:

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>

Basically what's happening is that I'm changing the background of the div whenever the user hovers on it, but when this happens the new background gets loaded bigger than the div and then it gets adjusted to the div, so it looks really messy.

asked Oct 12 '17 at 11:52

Alejandro Cordoba

When you change the background using the **shorthand** it overrides the `background-size` property...you'd have to restate it in the `:hover` – Paulie_D Oct 12 '17 at 12:01
Adding `background-size: cover;` to `:hover` doesn't fix the problem, it still has the same messy animation. – Alejandro Cordoba Oct 12 '17 at 12:09
if i remove transition, then it works with safari. – Huelfe Oct 12 '17 at 12:11
Any ideas how to achieve that without removing the transition ? – Alejandro Cordoba Oct 12 '17 at 12:18
Related? - https://stackoverflow.com/questions/27384684/background-transition-with-background-size-cover – Paulie_D Oct 12 '17 at 12:20

Safari animation issue

0 Answers0