Как убрать задержку перехода в Chrome?

Question

[Dubrovin]

Пример:
https://codepen.io/anon/pen/EzvXNV

В хроме transition некорректно обрабатывается - сначала отрабатывается переход текста и только потом начинает запускаться переход цвета иконки. Как это исправить и где можно почитать про "физику" данного процесса?

Answer 1

[lamer350]

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

Comments

[Dubrovin]

И текст и иконка меняется плавно, только сначала текст, а потом иконка. И так происходит только в хром, в файрфокс переход срабатывает сразу и для текста и для иконки.
Свойство transition прописано родителю и иконке.

[lamer350]

Dubrovin,

[Dubrovin]

lamer350, остроумно, только вы не привели решения проблемы.
То, что вы написали в первом комментарии - не верно, конкретно:
"а текст срабатывает моментально" - нет, текст не срабатывает моментально, переход 0.3s на iconText
"Самой задержки у вас нет" - задержка есть, как на иконке, так и на всём блоке целиком

[lamer350]

Dubrovin, вы не знаете основ, отсюда и такой вывод. То что хром пытается это как то отрендить - не значит что вы делает что то правильно. От того что вам напишут решение - умнее вы не станете, вы даже спорите о том где спора быть не может, просто прочитать про унаследованость и делов то.

[Dubrovin]

lamer350, уж поверьте, я знаю более чем достаточно (уверены ли вы, что вопрос так прост как вам кажется?) Вопрос остаётся открытым - почему хром делает задержку в перерисовке, а файрфокс не делает её и как исправить данную проблему.