[css-transitions] undesired behaviour - transition of inherited value happening in sequence.

[meirkoen]

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] spec for a definition of this behaviour but I did not see one.

My guess is that this is an undesired behaviour (bug) resulting by this section in the spec https://drafts.csswg.org/css-transitions/#starting that has left unhandled.

Before I will propose anything I wanted to post the issue to be sure that I'm not mistaken.

[Loirooriol]

Seems a Chromium/WebKit bug to me. Firefox does it well.

[meirkoen]

Seems a Chromium/WebKit bug to me. Firefox does it well.

I have tested it on Chrome and Safari and it’s the same so I guess it's WebKit.

However Firefox doesn’t handle the background-color transition well (the deepest span element become darker first).

I think there is an ambiguity in the [css-transitions] spec regarding transition of inherited value, which caused this bug in the implementation.

Could we add to the spec clear definition of what should happen?

I will file a bug in WebKit as well.

[Loirooriol]

However Firefox doesn’t handle the background-color transition well

This seems because mid-way the transition you are stacking rgba(255, 255, 0, 0.5) on top of rgb(128, 128, 0), so it looks more yellow. I don't know enough about colors to tell if that's the correct way to interpolate with transparent, or if the spans should actually be rgba(128, 128, 0, 0.5).

[meirkoen]

However Firefox doesn’t handle the background-color transition well

This seems because mid-way the transition you are stacking rgba(255, 255, 0, 0.5) on top of rgb(128, 128, 0), so it looks more yellow.

Thanks, I've added initial value background-color: inherit; in the codpen, to show the bug in properties with default value other than inherit

[meirkoen]

Link to the WebKit bug https://bugs.webkit.org/show_bug.cgi?id=214352

Closing the issue.