Bug 144565 - Colour transitions queueing instead of changing simultaneously
Summary: Colour transitions queueing instead of changing simultaneously
Status: RESOLVED MOVED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-05-04 04:07 PDT by Saut
Modified: 2022-07-14 14:08 PDT (History)
3 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Saut 2015-05-04 04:07:42 PDT 
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.
Comment 1 Alexey Proskuryakov 2015-05-04 19:29:18 PDT 
I could reproduce in Safari.
Comment 2 Saut 2015-05-05 08:00:48 PDT 
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.
Comment 3 Brent Fulgham 2022-07-14 14:08:18 PDT 
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