danielmesh danielmesh - 1 month ago 9
CSS Question

Why is this CSS Translate3d Animation Janky?

I can't figure out why the performance of this css transition using a hardware accelerated property

transform: translate3d();
is not working smoothly. Perhaps because the elements are absolutely positioned? I don't know...

CodePen Link

Can someone please explain to me why and how to fix? You can see the bad performance if you use Chrome's dev tools -> timeline, record, then run the animations by click the screen.

Here is a screencap of my dev tools.

enter image description here

Answer

Your columns aren't broken out of the document flow. You can see the horizontal scrollbar in the initial state. Try adding the following code to ensure they aren't triggering a redraw and scroll.

.columns {
  overflow:hidden;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}