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

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