Jerky CSS trasforma la transizione in Chrome

Question

Sto utilizzando la trasformazione CSS3 su un'immagine di sfondo per ingrandirla al passaggio del mouse.

Ho provato negli ultimi browser di Opera, Safari e Firefox e funzionano bene e senza intoppi, tuttavia in Chrome la transizione è molto a scatti.

Ecco il link, passa il mouse sopra le icone sociali per vedere cosa intendo .. http://www.media-flare.com/pins/ - Ho notato che quando ridimensionate il browser fino alla visualizzazione mobile, la situazione peggiora.

Ho eseguito una versione jsfiddle qui e ho rallentato la transizione in quanto è più difficile da vedere.

http://jsfiddle.net/wsgfz/1/ - Questo a scatti in cromo e firefox, liscio in safari e opera.

C'è qualcosa che posso fare per rendere più fluida la transizione?

Ecco il codice se non è possibile visualizzare 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

Trasformazioni sembrano funzionare meglio di transizioni in Chrome. Prova questo:

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

Lo sfarfallio effetto un mouse veloce in/out dovrebbe essere andato troppo ora.

Answer 2

questione fondamentale

Quando un'animazione gira lentamente e sembra irregolare, è semplicemente esponendo le limitazioni del browser che sono sempre lì.

I browser non dispongono di un thread dedicato per il rendering delle animazioni. Le animazioni devono competere con altre attività del browser come gli eventi dell'interfaccia utente. E a volte il browser è anche in competizione con altri software in esecuzione sul computer. Inoltre, l'accelerazione hardware disponibile per i browser è probabilmente limitata.

Le animazioni con andamento di rallentamento rallentano ancora all'inizio e/o alla fine dell'animazione, rendendo ancora più evidente l'irregolarità naturale delle animazioni.

Solutions

La soluzione più semplice per evitare disuniformità dall'essere così evidente è quello di aumentare la velocità dell'animazione, ed eventualmente eliminare o ridurre l'uso di allentamento. Potrebbe essere possibile usare un tipo di andamento che non rallenti tanto all'inizio e alla fine.

Andando avanti, un'altra opzione consiste nell'utilizzare l'accelerazione hardware di WebGL (tag canvas HTML5 con un contesto 3D), che dovrebbe ridurre il problema. Poiché l'accelerazione hardware diventa più comune e meglio supportata su browser e dispositivi, dovrebbe essere possibile rendere complesse animazioni che funzionano senza intoppi come le animazioni Flash meno recenti.

Answer 3

Aggiornamento 2017

In risposta al post di @ Matt Coughlin, i browser che supportano nativamente l'animazione, ora rendere CSS e JS animazioni sul proprio filo ....

CSS- le animazioni basate e le animazioni Web, se supportate in modo nativo, vengono generalmente gestite su un thread noto come "thread di composizione". Questo è diverso dal "thread principale" del browser, in cui vengono eseguiti lo styling, il layout, il painting e il JavaScript. Ciò significa che se il browser sta eseguendo alcune attività costose sul thread principale, queste animazioni possono continuare senza interruzioni.

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

Questa sviluppatori doc supporta anche la risposta attualmente accettato da @ user1467267 ...

Dove è possibile, si dovrebbe evitare di animare le proprietà che determinano il layout o vernice. Per la maggior parte dei browser moderni, ciò significa limitare le animazioni all'opacity o trasformare, entrambi i quali possono essere ottimizzati in modo ottimale; non importa se l'animazione è gestita da JavaScript o CSS.

Il documento suggerisce anche attuare l'uso della proprietà will-change per la proprietà, che vi verrà animando in modo che il browser in grado di eseguire ottimizzazioni supplementari per queste proprietà. Nella mia esperienza personale, questo sembra essere visibile in chrome solo per opacità e trasformazione.

element{ 
    will-change: transform, opacity; 
}