Bug 214352 - CSS Transition of inherited value sequenced across children elements
Summary: CSS Transition of inherited value sequenced across children elements
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 13
Hardware: Mac macOS 10.15
: P2 Critical
Assignee: Nobody
Keywords: BrowserCompat, InRadar
Depends on:
Reported: 2020-07-15 07:21 PDT by Meir Cohen
Modified: 2022-11-11 07:02 PST (History)
7 users (show)

See Also:

Reduction (226 bytes, text/html)
2020-07-31 06:09 PDT, Antoine Quint
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Meir Cohen 2020-07-15 07:21:41 PDT
Transition of inherited value, such as `text-indent`, in nested elements, is happening in sequence and not simultaneously with the transition of the parent value.

Here is a codepen demonstrates the issue: https://codepen.io/meirkoen/pen/mdVGRYj?editors=1100
On the left side you can see 3 variants of the issue.
On the right side you can see how it can be fixed - by specifying the values on the children as well.

I have tried to search the [css-transitions] https://drafts.csswg.org/css-transitions/ spec for a definition of this behaviour but I did not see one.

I've also opened an issue in csswg-drafts (https://github.com/w3c/csswg-drafts/issues/5324) to make sure that it's not an ambiguity in the spec at this section https://drafts.csswg.org/css-transitions/#starting. 

I also confirmed that it works well in Firefox
Comment 1 Radar WebKit Bug Importer 2020-07-22 07:22:18 PDT
Comment 2 Antoine Quint 2020-07-31 05:48:05 PDT
Pretty amazing, thanks for filing Meir! There are transition events fired on each frame here.
Comment 3 Antoine Quint 2020-07-31 05:59:56 PDT
This issues reproduces with a Safari build that predates the new Web Animations engine, this is likely a bug in the CSS code that generates the Animation objects fed to Style::TreeResolver::createAnimatedElementUpdate().
Comment 4 Antoine Quint 2020-07-31 06:09:13 PDT
Created attachment 405683 [details]

I've reduced the test further to just a color transition on <p> and nested <span> without any text-ident or display styles.
Comment 5 Antoine Quint 2020-07-31 06:09:42 PDT
This test only works correctly in Firefox, both Chrome and Safari have the wrong behavior of staggering the animations across elements.