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
--------------------------------------------------------------------