background-image transition not working in Safari - html

Question

On hover, I am trying to swap a background image using a CSS transition. However, in Safari, the image shrinks during the animation and I'm not sure why.
.icon {
background-color: white;
width: 100px;
height: 100px;
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MS44OSA4MS44OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM4YjkyYTE7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjZweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmljb24tc2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjM1LjU5IiBjeT0iMzUuNTkiIHI9IjMyLjU5Ii8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iNTguNjMiIHkxPSI1OC42MyIgeDI9Ijc5Ljc3IiB5Mj0iNzkuNzciLz48L3N2Zz4=);
background-size: 14px 14px;
background-repeat: no-repeat;
transition: all 1s;
}
.icon:hover {
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MS44OSA4MS44OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM1YTJhODI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjZweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmljb24tc2VhcmNoLXB1cnBsZTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIzNS41OSIgY3k9IjM1LjU5IiByPSIzMi41OSIvPjxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9IjU4LjYzIiB5MT0iNTguNjMiIHgyPSI3OS43NyIgeTI9Ijc5Ljc3Ii8+PC9zdmc+);
}
https://jsfiddle.net/Lfqucz82/

Answer 1

Although I don't know why Safari behaves like this, if you're trying to crossfade icons on hover, work on :after and :before pseudo-selectors opacity. Try as in this fiddle: https://jsfiddle.net/ifthenelse/6s9g4kdn/
Your CSS would look like this:
/* Icon container */
.icon {
position: relative;
background-color: white;
width: 100px;
height: 100px;
}
/* Images containers */
.icon:before, .icon:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
display: block;
background-size: 14px 14px;
background-repeat: no-repeat;
transition: opacity 1s;
}
/* Attach backgrounds */
.icon:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MS44OSA4MS44OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM4YjkyYTE7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjZweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmljb24tc2VhcmNoPC90aXRsZT48Y2lyY2xlIGNsYXNzPSJjbHMtMSIgY3g9IjM1LjU5IiBjeT0iMzUuNTkiIHI9IjMyLjU5Ii8+PGxpbmUgY2xhc3M9ImNscy0xIiB4MT0iNTguNjMiIHkxPSI1OC42MyIgeDI9Ijc5Ljc3IiB5Mj0iNzkuNzciLz48L3N2Zz4=);
opacity: 1;
}
.icon:after {
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MS44OSA4MS44OSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7c3Ryb2tlOiM1YTJhODI7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjZweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmljb24tc2VhcmNoLXB1cnBsZTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIzNS41OSIgY3k9IjM1LjU5IiByPSIzMi41OSIvPjxsaW5lIGNsYXNzPSJjbHMtMSIgeDE9IjU4LjYzIiB5MT0iNTguNjMiIHgyPSI3OS43NyIgeTI9Ijc5Ljc3Ii8+PC9zdmc+);
opacity: 0;
}
/* Transition on hover */
.icon:hover:before {
opacity: 0;
}
.icon:hover:after {
opacity: 1;
}

Answer 2

If the images appearing (before and during hovering) are not of the same sizes, one image (in your case, the first image) will appear perfectly sized since you have set the background-size: 14px 14px; and the other image might look resized (expanded or shrinked).
So
1. Check the sizes of the images. (if they are not the same, then define the perfect css background-size property you need
2. For the transition to be perfect (in all browsers & browser version), do
.icon{
//other css codes;
transition: 1s;
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
}