cssでのbackground-imageでhover後画像のロールオーバーのバグの対処

Question

解決させたい事は、cssでマウスオーバーで、画像を切り替えるシンプルな記述なのですが、
safariのみ、マウスオーバーすると画像が一瞬、小さく表示されてしまいます。

chrome、firefoxでは、問題ありませんでした。

ご教授頂けますと幸いです。

テストサイトになります。

トップページの動画の上に配置しております円の画像の箇所になります。

p.index-img1 a,
p.index-img2 a {
  	z-index: 2;
    position: absolute;
 	text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden;     
}

p.index-img1 a {
    right: 10%;
    top: 20%;
    background: url("images/top_m_icon.svg") no-repeat 50% 50%;
    background-size: 100%;
    width: 300px;
    height: 300px;
    display: block;
    margin: 0 auto;
    -webkit-transition: all 500ms ease-out;  
    transition: all 500ms ease-out; 
}


p.index-img1 a:hover {
    right: 10%;
    top: 20%;
    background: url("images/index_m_icon_on.svg") no-repeat 50% 50%;
    background-size: 100%;
    width: 300px;
    height: 300px;

}

Answer 1

transitionのallをwidthに変更することにより、解決いたしました。

ご回答いただきました方、誠にありがとうございました。

Answer 2

サファリが入っていなかった為、今DLして入れて確認したのですが
safariのみ、マウスオーバーすると画像が一瞬、小さく表示されてしまいます。
といった現象は見られませんでした。
念の為 var.5.1.7 です。
環境が再現できなかったので、何とも言えないのですが、
background-size: 100%; の 縦横を省略しないで書いてみたらいかがでしょうか？

Comments

[退会済みユーザー]

ご回答いただきありがとうございます。

こちら、transition:allが原因でした。
Safariをインストールしていただき検証を行っていただきまして
ありがとうございました。