Bug 121835
| Summary: | CSS3 animations don't run if dynamically hidden | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | David Faivre <faivre> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED CONFIGURATION CHANGED | ||
| Severity: | Normal | CC: | bfulgham, faivre, graouts, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | All | ||
David Faivre
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
This doesn't seem to work properly in Safari 15.5+
Radar WebKit Bug Importer
<rdar://problem/97094679>
Antoine Quint
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
It seems to work for me in Safari 16, so indeed this seems resolved.