各リボンにカーソルを合わせると、svg の色が変わります。すべてが良さそうです:)
http://codepen.io/anon/pen/qEILH
ただし、最初のリボンのみが正しい結果をもたらし、他のリボンは色の変化が発生する前に遅延があるように見え、それらの唯一の違いは href の値です。
どうしてこれなの???
これは Chrome でのみ発生する問題のようです。
各リボンにカーソルを合わせると、svg の色が変わります。すべてが良さそうです:)
http://codepen.io/anon/pen/qEILH
ただし、最初のリボンのみが正しい結果をもたらし、他のリボンは色の変化が発生する前に遅延があるように見え、それらの唯一の違いは href の値です。
どうしてこれなの???
これは Chrome でのみ発生する問題のようです。
灰色から白への移行について話しているのですか?どのバージョンの IE を使用していますか?
.ico svg セレクターを次のように変更してみてください: (追加の遷移期間を削除するか、0 に設定します)
.ico svg {
position: relative;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0s;
fill:inherit;
}
トランジション期間を理解していない他のブラウザと関係があるのではないかと思います。ただし、Chrome はそうするため、さらに 0.3 秒が追加され、遅延が発生します。