214352 2020-07-15 07:21:41 -0700 CSS Transition of inherited value sequenced across children elements 2026-03-27 12:30:30 -0700 1 1 1 Unclassified WebKit Animations Safari 13 Mac macOS 10.15 NEW https://github.com/w3c/csswg-drafts/issues/5324 BrowserCompat, InRadar P2 Critical --- 1 meirkoen webkit-unassigned ahmad.saleem792 dino graouts kizmarh koivisto myfonj simon.fraser webkit-bug-importer oldest_to_newest 1671731 0 meirkoen 2020-07-15 07:21:41 -0700 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 1673807 1 webkit-bug-importer 2020-07-22 07:22:18 -0700 <rdar://problem/65935293> 1676795 2 graouts 2020-07-31 05:48:05 -0700 Pretty amazing, thanks for filing Meir! There are transition events fired on each frame here. 1676796 3 graouts 2020-07-31 05:59:56 -0700 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(). 1676797 4 405683 graouts 2020-07-31 06:09:13 -0700 Created attachment 405683 Reduction I've reduced the test further to just a color transition on <p> and nested <span> without any text-ident or display styles. 1676798 5 graouts 2020-07-31 06:09:42 -0700 This test only works correctly in Firefox, both Chrome and Safari have the wrong behavior of staggering the animations across elements. 2076528 6 kizmarh 2024-11-20 15:01:48 -0800 This might be a duplicate of https://bugs.webkit.org/show_bug.cgi?id=46041 405683 2020-07-31 06:09:13 -0700 2020-07-31 06:09:13 -0700 Reduction 214352.html text/html 226 graouts PHN0eWxlPgoKICAgIHAsIHAgc3BhbiB7CiAgICAgICAgdHJhbnNpdGlvbjogY29sb3IgMXM7CiAg ICB9CgogICAgcDpob3ZlciB7CiAgICAgICAgY29sb3I6IGdyZWVuOwogICAgfQoKPC9zdHlsZT4K CjxwPgogICAgQUFBQUFBQQogICAgPHNwYW4+CiAgICAgICAgQkJCQkJCQgogICAgICAgIDxzcGFu PgogICAgICAgICAgICBDQ0NDQ0NDCiAgICAgICAgPC9zcGFuPgogICAgPC9zcGFuPgo8L3A+Cg==