Проблемы transitions в Google Chrome

Простой пример: https://codepen.io/OneNice_/pen/yKOoJB

div{ 
	width:100px; 
	height:100px; 
	background:red; 
	transition:1s all ease; 
	} 
	span{ 
	line-height:30px; 
	transition:1s all ease; 
	} 
	div:hover{ 
		width:200px 
	} 
	div:hover span{ 
		line-height:60px; 
	} 
	div:hover div{ 
		width:100px 
	} 
	div div:hover{} 
	div div{ 
	width:10px; 
	background:orange;}

<div> 
	<span>123<br><div>321</div></span> 
</div>

Есть и два дочерних элемента span и div. Для каждого элемента задано свойство transitions. И если в firefox при наведении мыши все анимации начнутся одновременно, то в хроме, в зависимости от кол-ва вложенных элементов, воспроизведение анимации идёт почти поочерёдно. На примере видно, что сначала увеличивается размер блоков и line-height на цифрах 123, и уже после, у вложенного блока div изменяется его line-height. Тоже самое происходит когда hover пропадает.

Я нашёл единственный подобный вопрос и ответом было просто убрать transitions у дочернего элемента, но это не решение...