RESOLVED CONFIGURATION CHANGED Bug 121835
CSS3 animations don't run if dynamically hidden 
https://bugs.webkit.org/show_bug.cgi?id=121835
Summary CSS3 animations don't run if dynamically hidden
David Faivre
Reported 2013-09-24 05:03:59 PDT
Specifically, using AngularJS for DOM manipulation, Bootstrap progress bars and Font Awesome spinner icon animations (as in the JSFiddle), if there is a ui-view (which dynamically loads its content) anywhere in the doc AND one of the animation classes is hidden using ng-show (dynamically shows/hides part of the page), all other animations in scope won't be active. REPRODUCE: See this JSFiddle: http://jsfiddle.net/dfaivre/KZNf3/6/. It looks like the progress bar initially animates. Click "Run" to re-run and see the described behavior If you use developer tools and toggle the animation class off/on, it will animate. It works in IE (10) and Firefox. Fails in both Chrome and Safari. Cross filed here: https://github.com/angular-ui/ui-router/issues/458#issuecomment-24928416, and reported through Chrome.
Attachments
Add attachment proposed patch, testcase, etc.
Brent Fulgham
Comment 1 2022-07-15 14:31:45 PDT
This doesn't seem to work properly in Safari 15.5+
Radar WebKit Bug Importer
Comment 2 2022-07-15 14:31:55 PDT
<rdar://problem/97094679>
Antoine Quint
Comment 3 2022-09-13 08:40:27 PDT
I see the same thing across Safari 16, Chrome and Firefox. Animations work and clicking on Run does not change a thing. So unless I'm missing something, I believe this is resolved.
Brent Fulgham
Comment 4 2022-09-13 09:46:36 PDT
It seems to work for me in Safari 16, so indeed this seems resolved.
Note You need to log in before you can comment on or make changes to this bug.