Avoiding absolute positioned elements from jumping on animations in chrome for mac

StackOverflow https://stackoverflow.com/questions/22618216

  •  20-06-2023
  •  | 
  •  

Pregunta

I just build this website : http://rcmm.minnie.mico.dk/

And on the front page i have a slideshow (bad UX - I know). If you click one of the small square icons in the bottom right corner the slider will animate.

This works great, except in chrome for mac. Every time the slider animates, all the elements that are positioned absolute will do a tiny pixel-jump. The animations on the slider however is using transform: translate() to do the animation. js is only swapping classes - no actualt animating - thats all handled by css.

Does anyone know why this is, and if there is a possible fix for this?

Any help would be much appreciated.

¿Fue útil?

Solución

Simply add -webkit-backface-visibility: hidden; to the <body> and the jumping should stop.

Any time you have minor glitches when using CSS Transforms, backface-visibility: hidden will straighten things out. It typically has to do with how the browser will handle hardware acceleration.

From CSS3 Animations: the Hiccups and Bugs You'll Want to Avoid:

The reason behind this phenomenon is unclear, but the fix is pretty simple. Simply adding the -webkit-backface-visibility: hidden; rule to your CSS should help prevent the problem. Apply it to the container of the element, like so:

.container { -webkit-backface-visibility: hidden; }

It boils down to another hardware acceleration problem - using this property simply kicks the acceleration into gear. You could also use things like -webkit-perspective: 1000; or other 3D properties.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top