Css3 Transition delay if svg fill and color animation at the same time chrome error works in FF

Question

I have a link with embedded svg and text. I want to animate on: hover (or add the .active class), but in Chrome the transition does not happen at the same time. Everything works fine on Firefox. Here is a demo:

[DEMO](http://codepen.io/anon/pen/QNvgvy)

Is there anyone who knows a solution to this problem? Thank!

Answer 1

I assume that there is a difference between FF and Chrome in how inherited css is distributed during the transition phase. FF does this immediately, while Chrome applies the new style value to the child only when the transition to the parent is complete.

: https://jsbin.com/koruyeludi/1/edit?html,css,js,console,output , , .

2 , .child .parent. . , . , node. , .

, * { transition: all 1s; }. <a> [0s-1s]. <span> <svg> [1s-2s]. <path> [2s-3s]. , transition: - <a>).