CSS3 animation break in Chrome with ui-view/ng-show combination

[dfaivre]

See this JSFiddle for the best description: http://jsfiddle.net/dfaivre/KZNf3/6/.

EDIT: It looks like the progress bar initially animates. Click "Run" to re-run and see the described behavior

Specifically, using Bootstrap progress bars and Font Awesome spinner icon animations (as in the JSFiddle), if there is a ui-view anywhere in scope AND one of the animation classes is hidden using ng-show, all other animations in scope won't be active.

If you use developer tools and toggle the animation class, it will animate.

It works in IE (10) and Firefox -- so this may be a chrome bug.

[dfaivre]

Same behavior in Safari as in Chrome. A webkit issue then?

[nateabele]

Yup, that's pretty weird, not sure what to tell you. I've got about 100 issues to get through, and being the only maintainer on this project, it's hard to justify spending any time on this without something more conclusive. Maybe try reporting it to the UI Bootstrap guys and see what they have to say.

[dfaivre]

Agreed -- I actually reported to WebKit as well, but who knows where that will end up.

This is great project, thanks for all the work.

[timkindberg]

@dfaivre are you still experiencing this bug?

[dfaivre]

@timkindberg -- I actually haven't checked in a while. Looks like the JSFiddle seems to work fine now, so maybe Chrome fixed something?

Let me know if its worth me diving back into the issue and I can get you something more concrete.

[eddiemonge]

https://gist.github.com/eddiemonge/f6a58169c2846731a1eb