CSS3 Scale Flicker in Safari

Question

Ich habe ein Problem mit CSS3 Skalierung und Safari (v10.0.1).

I haben eine Auswahl von Gitterpositionen mit der folgenden Struktur:

<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):

.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; 
      } 
     } 
    } 
} 

Das Bild absolut innerhalb des Rasterelement Behälters positioniert wird, und dann auf schweben skalierten .

Während der Bildskalierung in Safari wird das Bild leicht vergrößert und scheint sich zu verschieben. Lücken (weiße Linien) erscheinen um das Bild herum. Sobald die Animation abgeschlossen ist, sitzt das Bild korrekt, bis die Hover-Funktion entfernt wird.

Ich habe hier eine Arbeitsdemo eingerichtet, um das Problem zu demonstrieren.

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

Ich habe versucht, das Folowing auf das Bild und Muttergesellschaft, aber das Problem weiterhin auftritt.

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

Weiß jemand, wie das behoben werden kann?

Answer 1

Dies gilt nicht, spezifische Problem zu lösen, obwohl ein img-Tag, da Sie Größe für Ihre Bilder fixiert verwenden, warum background-image

mit image-set aktualisiert verwenden nicht das Äquivalent für die Hintergrundbilder zu erreichen, wie srcset für img tut ... und da es mehr oder weniger nur iOS Retina, die die hohe Auflösung verwenden, wird es einen ordentlichen Rückfall für einen Browser unterstützt nicht

.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>

Randnotiz, in obigem Beispiel verwende ich Inline-Stil die Bildquelle im Markup zu setzen, wie man mit dem img Tag tut, und natürlich könnte dies auch