Hardware acceleration not preventing stuttering with CSS grid

See more:

CSS

hardware

grid

Hi,

I have several elements within a div which are grids and contains between 0 and 32 subitems on the right section of the page. The left section is a navigation section so I have this setup:

|-nav-|---content---|

Above the nav, I have a button to collapse it, which sets its width to 32px with

transition: width 0.5s;

and the content stretches left to fill the gap. The problem is, when the content section contains elements, the smooth width transition gets increasingly choppy. Even with

transform: translateZ(0);

on the content's elements or generally with

div { transform: translateZ(0); }

there is little to no change, and sometimes makes it worse.

I have the most recent version of Chrome and a good computer with plenty of RAM and GPU capability spare. How could I fix this?

What I have tried:

Hardware acceleration
--------------------------------------------------------------------