Jerky CSS-Transformation Übergang in Chrome

Question

Ich benutze CSS3-Transformation auf ein Hintergrundbild, um bei Hover zu vergrößern.

Ich habe in den neuesten Browsern von Opera, Safari und Firefox getestet und arbeite schön und glatt, aber in Chrome ist der Übergang sehr ruckartig.

Heres ist der Link, schweben Sie über die sozialen Symbole, um zu sehen, was ich meine .. http://www.media-flare.com/pins/ - Ich habe bemerkt, wie Sie die Größe des Browsers auf mobile Ansicht verkleinern, wird es schlimmer.

Ich habe hier eine jsfiddle Version gemacht und den Übergang verlangsamt, da es schwerer zu sehen ist.

http://jsfiddle.net/wsgfz/1/ - Dies scheint ruckelig in Chrom und Firefox, glatt in Safari und Oper.

Gibt es etwas, was ich tun kann, um den Übergang reibungsloser zu machen?

Hier ist der Code, wenn Sie nicht jsfiddle

HTML

<ul class="social"> 
    <li><a href="" class="fbook">Facebook</a></li> 
    <li><a href="" class="twit">Twitter</a></li> 
    <li><a href="" class="tmblr">Tumbler</a></li> 
    <li><a href="" class="pntrst">Pinterest</a></li> 
    <li><a href="" class="insta">Instagram</a></li> 
    <li><a href="" class="rss">RSS</a></li> 
</ul> 

CSS

.social { 
    position: relative; 
    list-style:none; 
} 

.social > li > a { 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    color: transparent; 
} 

.social > li > a { 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    color: transparent; 
} 

.fbook, .twit, .tmblr, .pntrst, .insta { 
    background: url(http://placehold.it/350x150) center center; 
    width: 78px; 
    height: 90px; 
    background-size: cover; 
    float: left; 
    margin: 30px; 
    -webkit-transition: all 0.8s ease; 
    -moz-transition: all 0.8s ease; 
    transition: all 0.8s ease; 
} 

.fbook {background-position: 0 0} 
.twit {background-position: -78px 0} 
.tmblr {background-position: -156px 0} 
.pntrst {background-position: -232px 0} 
.insta {background-position: -310px 0} 

.fbook:hover, .twit:hover, .tmblr:hover, .pntrst:hover, .insta:hover { 
    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5); 
    transform: scale(1.5); 
} 

Answer 1

Transformations scheinen als Übergänge in Chrome, besser arbeiten sehen können. Versuchen Sie folgendes:

.social { 
 
    position: relative; 
 
    list-style: none; 
 
} 
 
.social > li > a { 
 
    text-indent: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    color: transparent; 
 
} 
 
.social > li > a { 
 
    text-indent: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    color: transparent; 
 
} 
 
.fbook, 
 
.twit, 
 
.tmblr, 
 
.pntrst, 
 
.insta { 
 
    background: url(http://placehold.it/350x150) center center; 
 
    width: 78px; 
 
    height: 90px; 
 
    background-size: cover; 
 
    float: left; 
 
    margin: 30px; 
 
    -webkit-transform: translate(0px, 0); 
 
    -webkit-transition: -webkit-transform 0.8s ease; 
 
    -moz-transform: translate(0px, 0); 
 
    -moz-transition: -moz-transform 0.8s ease; 
 
    transform: translate(0px, 0); 
 
    transition: -webkit-transform 0.8s ease; 
 
} 
 
.fbook { 
 
    background-position: 0 0 
 
} 
 
.twit { 
 
    background-position: -78px 0 
 
} 
 
.tmblr { 
 
    background-position: -156px 0 
 
} 
 
.pntrst { 
 
    background-position: -232px 0 
 
} 
 
.insta { 
 
    background-position: -310px 0 
 
} 
 
.fbook:hover, 
 
.twit:hover, 
 
.tmblr:hover, 
 
.pntrst:hover, 
 
.insta:hover { 
 
    -webkit-transform: scale(1.5); 
 
    -moz-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
}

<ul class="social"> 
 
    <li><a href="" class="fbook">Facebook</a> 
 
    </li> 
 
    <li><a href="" class="twit">Twitter</a> 
 
    </li> 
 
    <li><a href="" class="tmblr">Tumbler</a> 
 
    </li> 
 
    <li><a href="" class="pntrst">Pinterest</a> 
 
    </li> 
 
    <li><a href="" class="insta">Instagram</a> 
 
    </li> 
 
    <li><a href="" class="rss">RSS</a> 
 
    </li> 
 
</ul>

Das Flackern Effekt eine schnelle Maus in/out jetzt auch verschwunden sein sollte.

Answer 2

Grund Ausgabe

Wenn eine Animation läuft langsam und sieht uneben, es einfach ist das Aussetzen der Grenzen des Browsers, die immer da sind.

Browser haben keinen eigenen Thread zum Rendern von Animationen. Animationen müssen mit anderen Browseraktivitäten wie UI-Ereignissen konkurrieren. Und manchmal konkurriert der Browser auch mit anderer Software, die auf dem Computer läuft. Außerdem ist die für Browser verfügbare Hardwarebeschleunigung wahrscheinlich etwas eingeschränkt.

Animationen mit Beschleunigungen laufen am Anfang und/oder am Ende der Animation noch langsamer ab, wodurch die natürliche Unebenheit der Animationen noch deutlicher wird.

Lösungen

Die einfachste Lösung, um die Unebenheiten zu verhindern, dass so offensichtlich zu sein, sind die Geschwindigkeit der Animation zu erhöhen und gegebenenfalls entfernen oder die Verwendung von Lockerung zu verringern. Es kann möglich sein, eine Art von Beschleunigung zu verwenden, die am Anfang und am Ende nicht so stark verlangsamt wird.

In Zukunft wird eine andere Option die Hardwarebeschleunigung von WebGL (HTML5-Canvas-Tag mit einem 3D-Kontext) verwenden, die das Problem verringern sollte. Da Hardwarebeschleunigung auf Browsern und Geräten immer häufiger und besser unterstützt wird, sollte es möglich sein, komplexe Animationen zu erstellen, die so reibungslos ablaufen wie ältere Flash-Animationen.

Answer 3

-Update 2017

Als Reaktion auf @ Matt Coughlin der Post, Browser, die nativ Animation unterstützen, jetzt CSS und JS-Animationen auf ihrem eigenen Thread machen ....

CSS- Basierte Animationen und Web-Animationen, die nativ unterstützt werden, werden normalerweise in einem Thread behandelt, der als "Compositor-Thread" bezeichnet wird. Dies unterscheidet sich vom "Hauptthread" des Browsers, wo Styling, Layout, Malerei und JavaScript ausgeführt werden. Das bedeutet, wenn der Browser einige teure Aufgaben im Hauptthread ausführt, können diese Animationen ohne Unterbrechung weiterlaufen.

https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance

Dieser Entwickler doc unterstützt auch die derzeit akzeptierte Antwort von @ user1467267 ...

Wo Sie können Sie Eigenschaften Animieren vermeiden sollten, die das Layout oder Farbe auslösen. Für die meisten modernen Browser bedeutet dies, Animationen auf Opazität zu beschränken oder zu transformieren, die beide vom Browser optimiert werden können; Es spielt keine Rolle, ob die Animation von JavaScript oder CSS bearbeitet wird.

Das Dokument schlägt auch die Verwendung der für die Eigenschaft will-change Eigenschaft Implementierung, die Sie animieren werden, so dass der Browser zusätzliche Optimierungen für diese Eigenschaften durchführen kann. In meiner persönlichen Erfahrung scheint dies nur in Chrom für Opazität und Transformation zu bemerken.