SafariでCSS遷移の背景画像ジャンプホバー

Question

Safariでトランジションエフェクトに問題があり、何か助けになることがあります。私のCSSホバーはバックグラウンドイメージをスワップしますが、ホバーイメージはその位置から左に移動します（これは起こりたくありません）。ありがとう。

構造：

.sidebar .widget { 
 
\t height: 276px; 
 
\t width: 326px; 
 
\t background:url('/wp-content/themes/a-theme/svg/polygon-image.svg') no-repeat center center; 
 
\t background-size: 100%; 
 
} 
 

 
.sidebar .widget:hover { 
 
\t background:url('/wp-content/themes/a-theme/svg/polygon-image-hover.svg') no-repeat center center; 
 
\t background-size: 100%; 
 
\t transition: 0.5s ease-in-out; 
 
}

<div class="sidebar"> 
 
\t <aside id="black-studio-tinymce-18" class="widget widget_black_studio_tinymce"> 
 
\t \t <div class="textwidget"> 
 
\t \t \t <h3 style="text-align: center;">Sample Text<br></h3> 
 
\t \t </div> 
 
\t </aside> 
 
</div>

Answer 1

避けるには、バグやクリーンブラウザ：あなたの助けから

.sidebar .widget { 
    height: 276px; 
    width: 326px; 
    background-repeat:no-repeat; 
    background-position: center center; 
    background-image:url(/wp-content/themes/a-theme/svg/polygon-image.svg); 
    background-size: 100%; 
    transition:background-image 0.5s ease-in-out; 
} 
.sidebar .widget:hover { 
    background-image:url(/wp-content/themes/a-theme/svg/polygon-image-hover.svg); 
} 

Answer 2

を、私は私が必要な正確に何を得るために、私のCSSを修正。私はその中に多角形とグラフィックの背景イメージを持っていました。私はグラフィックを保持し、図形の代わりにCSSポリゴンを使用していましたが、ホバー効果はFirefox、Chrome、Safariで機能します。

下記のCSSをご覧になり、返信をありがとうございます。

sidebar .widget { 
 
\t background: url('/wp-content/uploads/2017/08/image.png') no-repeat center center; 
 
\t background-color: rgba(255, 165, 0, 0.85); 
 
\t background-size: 70%; 
 
\t -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); 
 
\t clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); 
 
\t height: 276px; 
 
\t width: 326px; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
} 
 

 
.sidebar .widget:hover { 
 
\t background: url('/wp-content/uploads/2017/08/image.png') no-repeat center center; 
 
\t background-color: rgba(108, 218, 244, 0.8); 
 
\t background-size: 80%; 
 
\t -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); 
 
\t clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); 
 
\t height: 276px; 
 
\t width: 326px; 
 
\t transition: 0.5s ease-in-out; 
 
}