Как предотвратить перерисовку других элементов при использовании перехода CSS

Я пытаюсь предотвратить перерисовку браузера, чтобы повысить производительность большого одностраничного приложения, в котором используется анимация CSS.

Если у меня есть элемент с эффектом :hover { transform: scale(...) }, я могу предотвратить перерисовку, используя will-change: transform и/или transform: translateZ(0), как уже упоминалось здесь.

Но как только я добавляю к этому элементу transition, многие элементы снова начинают перерисовываться.

Вот демонстрационный код и его гифка

Единственное, что помогло предотвратить эту перерисовку, — это поместить другие элементы перед анимационным элементом в порядке DOM или z-индексировать анимационный элемент над другими элементами. Но со сложным одностраничным приложением я не хочу микроуправлять z-индексом любого элемента, которому просто нужен переход при наведении.

Любые другие идеи или ссылки? Я не видел обсуждения этой конкретной проблемы с transitions где-либо еще.