Pourquoi mon animation CSS3 n'est-elle pas lisse dans Google Chrome (mais très lisse sur les autres navigateurs))?
MON ENVIRONNEMENT (O JE ME TROUVE LE GAL):
Mac OSX El Capitan 10.11.2 sur Chrome Version 50.0.2661.102 (64 bits)
CODEPEN:
http://codepen.io/vieron/pen/hnEev
ANIMATION:
SITUATION:
Je googlé cela beaucoup sans trouver quoi que ce soit qui fonctionne pour moi. Je sais que cette question a déjà été posée.
L'animation CSS3 est fluide sur mon Mac lorsque j'ouvre le site Web avec Safari et Firefox, mais pas avec Chrome!
Curieusement, le CodePen d'origine est lisse sur Chrome.
PROBLEME:
Quelque chose dans mon code rend l'animation agitée uniquement sur Chrome. Qu'est-ce que c'est et comment puis-je le réparer?
CE QUE J’AI REGARDÉ:
J'ai besoin que mon positionnement soit relatif pour m'adapter à différentes tailles d'écran.
http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser
https://www.binarymoon.co.uk/2014/02/fixing-css-transitions-in-google-chrome/
http://blog.teamtreehouse.com/create-smoother-animations-transitions-browser
CODE:
HTML
<div class="Marquee">
<ul>
<li>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
</li>
<li>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
</li>
<li>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
<a href="https://developer.Apple.com/Swift/"><img class="Marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
<a href="https://developer.Apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="Marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
</li>
</ul>
</div>
CSS
* {
margin: 0;
padding: 0;
}
@-webkit-keyframes loop {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(-66.6%);
-ms-transform: translateX(-66.6%);
-webkit-transform: translateX(-66.6%);
transform: translateX(-66.6%);
}
}
@-moz-keyframes loop {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(-66.6%);
-ms-transform: translateX(-66.6%);
-webkit-transform: translateX(-66.6%);
transform: translateX(-66.6%);
}
}
@-ms-keyframes loop {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(-66.6%);
-ms-transform: translateX(-66.6%);
-webkit-transform: translateX(-66.6%);
transform: translateX(-66.6%);
}
}
@keyframes loop {
0% {
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-moz-transform: translateX(-66.6%);
-ms-transform: translateX(-66.6%);
-webkit-transform: translateX(-66.6%);
transform: translateX(-66.6%);
}
}
.cssanimations .Marquee {
position: relative;
width: 90%;
margin: auto;
overflow: hidden;
}
.cssanimations .Marquee > ul {
list-style: none;
position: relative;
z-index: 1;
top: 0;
left: 0;
width: 300% !important;
height: 80px;
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-animation: loop 20s linear infinite;
-moz-animation: loop 20s linear infinite;
-o-animation: loop 20s linear infinite;
animation: loop 20s linear infinite;
}
.cssanimations .Marquee > ul > li {
white-space: normal;
position: relative;
text-align: justify;
text-justify: distribute-all-lines;
line-height: 0;
letter-spacing: -0.31em;
float: left;
width: 33.333333%;
overflow: hidden;
height: 80px;
}
.cssanimations .Marquee > ul > li:before {
content: '';
position: relative;
height: 100%;
width: 0;
}
.cssanimations .Marquee > ul > li:before,
.cssanimations .Marquee > ul > li > * {
vertical-align: middle;
display: inline-block;
}
.cssanimations .Marquee > ul > li:after {
content: '.';
display: inline-block;
height: 0 !important;
width: 100%;
overflow: hidden !important;
visibility: hidden;
font-size: 0;
Word-spacing: 100%;
}
.cssanimations .Marquee > ul > li > * {
display: inline-block;
vertical-align: middle;
text-align: left;
line-height: 1;
letter-spacing: 0;
}
.cssanimations .Marquee > ul > li img {
margin: 0 1.6%;
}
.Marquee ul li a{
display: inline-block;
height: 80%;
}
.Marquee ul li a img {
max-height: 100%;
}
JS LIENS DANS LE HTML
<script src="Vendors/js/modernizr.js" type="text/javascript"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
IMPORTANT N.B.:
La seule chose que j'ai ajoutée au CodePen:
.Marquee ul li a{
display: inline-block;
height: 80%;
}
.Marquee ul li a img {
max-height: 100%;
}
Supprimer cela ne résout pas le problème.
EDIT 1:
Google Chrome Profiler (option 1):
Google Chrome Profiler (option 2 (instantané))):
EDIT 2:
La transition CSS3 n'est pas fluide dans Chrome
Il semble que je viens de trouver un comportement étrange dans mon animation. Il "grossit" (grossit) à chaque fois que je m'éloigne de la vue et que je reviens dessus en faisant défiler.
Ce comportement semble être ce qui est décrit dans la réponse à la question ci-dessus. Mais spécifier une largeur fixe, comme suggéré, ne résout pas le retard.
EDIT 3:
Chronologie Google (après avoir supprimé gravity.js):
EDIT 4:
C'est bizarre. Après avoir commenté et décommenté certaines lignes (pour en revenir au code utilisé en cas de décalage), la performance de l'animation est devenue meilleure. Pas aussi lisse que dans Safari ou Firefox, mais toujours plus lisse.
EDIT 5:
J'ai trouvé le "coupable".
J'utilise un autre code dans l'en-tête de mon site:
https://codepen.io/saransh/pen/BKJun
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
%span
PURE CSS
%br
%span
PARALLAX PIXEL STARS
En la supprimant, l’autre animation est lisse.
NONETHELESS:
Cela n'explique pas pourquoi tout est fluide dans Firefox et Safari mais pas dans Chrome.
Est-ce que Chrome est moins puissant?
J'ai envoyé un rapport à Chrome et j'espère qu'ils répondront ici mais il n'y a aucune garantie.
Si quelqu'un peut obtenir une réponse de Google/Chrome), je lui attribue la prime.
UPDATE 6:
Essayé sur le navigateur Opera. Exactement le même décalage! Maintenant, nous savons que c'est un problème avec le moteur de rendu BLINK!
J'ai trouvé le "coupable".
J'utilise un autre code dans l'en-tête de mon site:
https://codepen.io/saransh/pen/BKJun
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
#stars
#stars2
#stars3
#title
%span
PURE CSS
%br
%span
PARALLAX PIXEL STARS
En la supprimant, l’autre animation est lisse.
NONETHELESS:
Cela n'explique pas pourquoi tout est fluide dans Firefox et Safari mais pas dans Chrome.
Est-ce que Chrome est moins puissant?
J'ai envoyé un rapport à Chrome et j'espère qu'ils répondront ici mais il n'y a aucune garantie.
Si quelqu'un peut obtenir une réponse de Google/Chrome), je lui attribue la prime.
MISE À JOUR 6:
Essayé sur le navigateur Opera. Exactement le même décalage! Maintenant, nous savons que c'est un problème avec le moteur de rendu BLINK!
Chrome prend en charge l'accélération matérielle lors du rendu, ce qui améliore les performances des animations CSS3. Vous pouvez déclencher une accélération matérielle en appliquant translateZ(0), rotateZ(360deg) ou similaire, astuces Chrome).
Une fois que vous utilisez l'accélération matérielle en appliquant l'astuce ci-dessus (ou si vous l'utilisiez déjà, mais l'exemple de code cité était incomplet et/ou une bibliothèque tierce s'en occupait pour vous) , vous pouvez encore améliorer les performances en appliquant, avec les préfixes nécessaires:
backface-visibility: hidden;
perspective: 1000;
Cela aide également à résoudre certains problèmes lorsque le processeur graphique est intégré et/ou en train d'être étranglé (pensez en mode d'économie d'énergie) et que ses performances se dégradent. Cela expliquerait les problèmes de performances de parallaxe sur un macbook! ¯\_ (ツ) _/¯
SOLUTION:
Utilisez le positionnement absolu avec @media pour différentes tailles d'écran.
EXPLICATION:
Cela fonctionne pour tous les autres navigateurs et pas Chrome, donc quoi que vous fassiez, ce sera spécifiquement pour Chrome.
Cela vous donne 3 options:
(1) oblige Google à réparer Chrome ou
(2) utilisez une solution qui fonctionnera avec Chrome ou
(3) accepter que ce ne sera pas lisse avec Chrome.
TL; DR:
Vous savez que le positionnement absolu fonctionnera.
Pour améliorer les animations, vous pouvez utiliser will-change propriété de CSS. Cette propriété indique au navigateur que l'élément va changer.
https://developer.mozilla.org/en/docs/Web/CSS/will-change
Vous pouvez en lire plus ici à propos de will-change.