переход в фоновом режиме не работает в Safari

Question

При наведении на объект, я пытаюсь поменять фоновое изображение с помощью перехода CSS. Однако в Safari изображение сжимается во время анимации, и я не уверен, почему.

.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

Хотя я не знаю, почему Safari ведет себя, как это, если вы пытаетесь кроссфейд иконки при наведении курсора мыши, работа по: после того, как и: прежде, чем псевдо-селекторов непрозрачности. Попробуйте, как в этой скрипке: https://jsfiddle.net/ifthenelse/6s9g4kdn/

Вашего CSS будет выглядеть следующим образом:

/* 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

Если изображения появляются (до и во время зависания) не из одних и тех же размеров, одно изображения (в вашем случае, первое изображение) будет выглядеть идеально, поскольку вы установили background-size: 14px 14px;, а другое изображение может выглядеть измененным (расширенным или сжатым).

So 1. Проверьте размеры изображений. (Если они не совпадают, то определить идеальный CSS background-size свойство вам нужно 2. Для перехода к совершенным (во всех браузерах & браузер версии), сделать

.icon{ 
    //other css codes; 
    transition: 1s; 
    -o-transition: 1s; 
    -ms-transition: 1s; 
    -moz-transition: 1s; 
    -webkit-transition: 1s; 
}