Аппаратное ускорение не предотвращает заикание с помощью CSS grid

---

Привет,

У меня есть несколько элементов внутри div, которые являются сетками и содержат от 0 до 32 подпунктов в правой части страницы. Левая секция-это раздел навигации, поэтому у меня есть эта настройка:

|-nav-|---контент---|

Над навигатором у меня есть кнопка, чтобы свернуть его, которая устанавливает его ширину в 32px с помощью

transition: width 0.5s;

и содержимое тянется влево, чтобы заполнить пробел. Проблема в том, что когда раздел содержимого содержит элементы, плавный переход ширины становится все более прерывистым. Даже с помощью

transform: translateZ(0);

на элементах контента или вообще с помощью

div { transform: translateZ(0); }

там мало что меняется, а иногда и вовсе становится хуже.

У меня есть самая последняя версия Chrome и хороший компьютер с большим количеством оперативной памяти и графического процессора. Как я могу это исправить?

Что я уже пробовал:

Аппаратное ускорение
--------------------------------------------------------------------

---