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.画像のサイズを確認します。それらが同じでない場合（、そしてこれはSafariのための最善の回避策のように見えます

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