Bug 144565
| Summary: | Colour transitions queueing instead of changing simultaneously | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Saut <anthony> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED MOVED | ||
| Severity: | Normal | CC: | bfulgham, dino, simon.fraser |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | All | ||
| OS: | All | ||
Saut
When using CSS transitions to alter colour in webkit, the elements animate in order (possibly of dom depth) one after another as opposed to simultaneously.
Here is a simple demo pen: http://codepen.io/anon/pen/PqqLby
Can reproduce in webkit browsers: Chrome 42.0.2311.135 m (64-bit), Vivaldi 1.0.162.4, Opera 29.0.1795.47.
Issue not present in: IE 11.0.9600.17728, Firefox 37.0.2.
Tested on Windows 8.1 64bit.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Alexey Proskuryakov
I could reproduce in Safari.
Saut
Turns out this happens for all inherited properties.
The workaround is to avoid using * with transition: all; and instead specify transitions for inherited properties separately.
Example here: http://codepen.io/sergdenisov/pen/QbjjjP
Thanks to Sergey Denisov on SO for this solution.
Brent Fulgham
The relevant test case seems to be broken in modern Safari, Chrome, and Firefox.
We are tracking WPT as the primary source of truth for various web compatibility issues, so I don't know that keeping this old bug open is useful