background-image transition not working in Safari

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;
}