Низкий FPS при раскрытии последнего подменю accordeon-menu?

Question

[Nikolino]

Пример: https://jsfiddle.net/nikolino/t9a5xrqf/36/

При клике по первым двум кнопкам, подменю раскрывается плавно, без рывков.
При клике по последнему, оно раскрывается с низким FPS.

Вероятно как-то связано с подсчетом scrollHeight.

Подскажите почему так происходит?
Или посоветуйте, пожалуйста, более удобный и "правильный" способ с transition при раскрытии аккордеон меню на голом JS.

Comments

[kr_ilya]

у меня все плавно раскрываются

Answer 1

[Nikolino]

UPDATE:
как оказалось, transition height это довольной сложный и медленный для браузера процесс, в сравнении, например, с transform translate. И анимации width и height не дают стабильных 60fps.
Вот видео, снятое с 240FPS, показывающее разницу: https://www.youtube.com/watch?v=-62uPWUxgcg
Вот здесь объяснение от ребят из гугла: https://www.html5rocks.com/en/tutorials/speed/high...