html - todos - ¿Por qué mi animación CSS3 no es fluida en Google Chrome(pero es muy sencilla en otros navegadores)?

versiones de navegadores que soportan html5 (4)

MI ENTORNO (DONDE CONSIGO EL LAG):

Mac OSX El Capitan 10.11.2 en Chrome versión 50.0.2661.102 (64 bits)

CODEPEN:

http://codepen.io/vieron/pen/hnEev

ANIMACIÓN:

SITUACIÓN:

Busqué en Google esto mucho sin encontrar nada que funcione para mí. Sé que esta pregunta se ha hecho antes.

La animación CSS3 es sencilla en mi Mac cuando abro el sitio web con Safari y Firefox, ¡pero no con Chrome!

Por extraño que parezca, el CodePen original es sencillo en Chrome.

PROBLEMA:

Algo en mi código está causando que la animación esté entrecortada solo en Chrome. ¿Qué es y cómo puedo solucionarlo?

LO QUE MIVE:

Chrome CSS 3 Transition Not Smooth

Necesito que mi posicionamiento sea relativo para adaptarme a diferentes tamaños de pantalla.

CÓDIGO:

HTML

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 LINKS EN EL 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>

IMPORTANTE NB:

Lo único que agregué al CodePen:

.marquee ul li a{ display: inline-block; height: 80%; } .marquee ul li a img { max-height: 100%; }

Eliminar esto no resuelve el problema.

EDIT 1:

Google Chrome Profiler (opción 1):

Google Chrome Profiler (opción 2 (instantánea)):

EDICION 2:

La transición de CSS3 no es suave en Chrome

Parece que acabo de encontrar un comportamiento extraño en mi animación. "Crece" (se hace más grande) cada vez que me muevo fuera de la vista y lo vuelvo a desplazar al desplazarme.

Este comportamiento parece ser lo que se describe en la respuesta a la pregunta anterior. Pero especificar un ancho fijo como el sugerido no solucionó el desfase.

EDIT 3:

Google Timeline (después de eliminar gravity.js):

EDIT 4:

Esto es extraño. Después de comentar y descomentar algunas líneas (básicamente volviendo a lo que era el código cuando había retraso), el rendimiento de la animación mejoró. No es tan fácil como en Safari o Firefox, pero aún más suave.

EDIT 5:

Encontré al "culpable".

Estoy usando otro codepen en el encabezado de mi sitio web:

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

Al quitarlo, la otra animación se suaviza.

SIN EMBARGO:

Esto no explica por qué todo es sencillo en Firefox y Safari, pero no en Chrome.

¿Chrome es menos poderoso?

Archivé un informe en Chrome y espero que respondan aquí, pero no hay garantía.

Si alguien puede obtener una respuesta de Google / Chrome sobre esto, le otorgo la recompensa.

ACTUALIZACIÓN 6:

Intentó en el navegador Opera. Exactamente el mismo retraso ¡Ahora sabemos que es un problema con el motor de renderizado BLINK!

Chrome admite aceleración de hardware cuando se procesa, lo que mejora el rendimiento de las animaciones css3. Puede activar la aceleración de hardware aplicando translateZ(0) , rotateZ(360deg) o similar, lo que engaña a Chrome.

Una vez que esté utilizando aceleración de hardware aplicando el truco anterior (o si ya lo estaba usando, pero el ejemplo de código citado estaba incompleto y / o una biblioteca de terceros se estaba ocupando de ello) , puede mejorar aún más el rendimiento mediante aplicando, con prefijos según sea necesario:

backface-visibility: hidden; perspective: 1000;

Esto también ayuda a resolver algunos problemas cuando la GPU está integrada y / o está siendo acelerada (modo de ahorro de energía), y su rendimiento se degrada. ¡Esto explicaría los problemas con el rendimiento de paralaje en un macbook! ¯ / _ (ツ) _ / ¯

Encontré al "culpable".

Estoy usando otro codepen en el encabezado de mi sitio web:

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

Al quitarlo, la otra animación se suaviza.

SIN EMBARGO:

Esto no explica por qué todo es sencillo en Firefox y Safari, pero no en Chrome.

¿Chrome es menos poderoso?

Archivé un informe en Chrome y espero que respondan aquí, pero no hay garantía.

Si alguien puede obtener una respuesta de Google / Chrome sobre esto, le otorgo la recompensa.

ACTUALIZACIÓN 6:

Intentó en el navegador Opera. Exactamente el mismo retraso ¡Ahora sabemos que es un problema con el motor de renderizado BLINK!

Para mejorar las animaciones, puede usar la propiedad de will-change de CSS. Esta propiedad indica al navegador que el elemento va a cambiar.

https://developer.mozilla.org/en/docs/Web/CSS/will-change

Puedes leer más aquí sobre will-change .

SOLUCIÓN:

Use posicionamiento absoluto con @media para diferentes tamaños de pantalla.

EXPLICACIÓN:

Funciona para todos los demás navegadores y no para Chrome, así que hagas lo que hagas será específicamente para Chrome.

Esto te da 3 opciones:

(1) consigue que Google arregle Chrome o
(2) use una solución que funcionará con Chrome o
(3) acepta que no será sencillo con Chrome.

TL; DR:

Sabes que el posicionamiento absoluto funcionará.