SafariのCSS3スケールフリッカー

Question

CSS3スケーリングとSafari（v10.0.1）で問題が発生しています。

<div class="grid-inline col-12 bp1-col-6 bp3-col-3 index-grid-selector index"> 
    <a href=""> 
     <div class="index-grid-item"> 
      <div class="index-grid-dummy"></div> 
      <img srcset=", 2x" title="" alt=""> 
     </div> 
    </a> 
</div> 

CSS（LESS）：

Iは、以下の構造を有するグリッド項目の選択をしている画像は絶対グリッドアイテム容器内に配置した後、ホバーにスケーリングさ

.index-grid-selector {  
    a {  
     .index-grid-item { 
      position: relative; 
      overflow: hidden; 
      -webkit-backface-visibility: hidden; 
      -moz-backface-visibility: hidden; 
      -ms-backface-visibility: hidden; 
      -o-backface-visibility: hidden; 
      backface-visibility: hidden; 

      .index-grid-dummy { 
       padding-bottom: 100%; 
      } 

      img { 
       position: absolute; 
       top: 0; 
       left: 0; 
       -webkit-transition: all 0.25s ease-in-out; 
       -moz-transition: all 0.25s ease-in-out; 
       -ms-transition: all 0.25s ease-in-out; 
       -o-transition: all 0.25s ease-in-out; 
       transition: all 0.25s ease-in-out; 
      } 
     } 
    } 

    &:hover { 
     .index-grid-item { 
      img { 
       transform: scale(1.2); 
       -webkit-transition: all 0.25s ease-in-out; 
       -moz-transition: all 0.25s ease-in-out; 
       -ms-transition: all 0.25s ease-in-out; 
       -o-transition: all 0.25s ease-in-out; 
       transition: all 0.25s ease-in-out; 
      } 
     } 
    } 
} 

。

Safariでの画像の拡大中に、画像がわずかに拡大してシフトしているように見えます。ギャップ（白い線）が画像の周りに現れます。アニメーションが完了すると、ホバー機能が削除されるまで画像が正しく表示されます。

問題を紹介するためのデモをここに設定しました。

http://www.testdomainone.co.uk/test.html

私は画像とその親にfolowingを適用しようとしましたが、問題が引き続き発生します。

-webkit-transform-style: preserve-3d; 
-webkit-transform:translate3d(0,0,0); 
-webkit-transform: translateZ(0) 

どのようにこの問題を修正できるか知っていますか？

Answer 1

あなたがあなたのイメージのために固定サイズを使用するので、なぜsrcsetはimgの場合と同様に背景画像用の同等を達成するためにimage-setで更新background-image

を使用していないが、これは、imgタグを使用して、特定の問題を解決しません...そしてそれは、高解像度で、それはブラウザのためのまともなフォールバックはそれを

.index-grid-item { 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.index-grid-dummy { 
 
    padding-bottom: 100%; 
 
    background-size: 100%; 
 
    transition: transform 0.25s ease-in-out; 
 
} 
 
.index-grid-item:hover > div { 
 
    transform: scale(1.2); 
 
    transition: transform 0.25s ease-in-out; 
 
}

<div class="index-grid-item"> 
 
    <div class="index-grid-dummy" style="background-image: -webkit-image-set(url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg) 1x, url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large_2x.jpg) 2x); 
 
background-image: url(http://www.testdomainone.co.uk/images/uploads/tours/39/jmc_5233-bigsur__thumb_large.jpg)"></div> 
 
</div>

をサポートしていないことになることを使用し、多かれ少なかれだけiOSの網膜であるため、

サイドノートで、上記のサンプルでは、​​私は1がimgタグと同じように、マークアップの画像ソースを設定するには、インラインスタイルを使用し、そしてもちろん、これは同様にCSSで