1882408 - transition-behavior doesn't work as expected

Status: NEW

(Core :: CSS Transitions and Animations, defect)

Description

[Sebastian Zartner [:sebo]]

Given the Codepen example provided by the people behind the related web.dev blog post, transition-behavior doesn't have any influence on the transition of the display property.

According to CSS Display 4, any p value between 0 and 1 results in the non-none value. So the cards in the example should have a value of block for the display property for the time of the transition (0.25s) until it switches to none.

Sebastian

Comment 1

[Boris Chiou [:boris]]

Looks like the animation of display is buggy, per our meta.

I'd go through it for CSS Animation as well.

Comment 2

[Boris Chiou [:boris]]

So it seems like we intentionally disabled the animation of display property, per Bug 1371518 comment 0. So this may be related to supporting animation for display property. Once we support it, transition-behavior should work properly.

Comment 3

[Boris Chiou [:boris]]

We probably have to fix Bug 1834877 first.

Comment 4

[Claas Augner [:claas]]

The content-visibility property is also affected, see https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility#browser_compatibility and https://github.com/mdn/browser-compat-data/issues/26155.

Comment 5

[Jake Archibald [:jakea]]

Here's a feature-detect, if anyone needs it:

const supportsDisplayTransition = (() => {
  let cachedValue = undefined;
  return () => {
    if (cachedValue === undefined) {
      const div = document.createElement('div');
      div.style.transition = 'display 1s allow-discrete';
      document.body.append(div);
      const cs = getComputedStyle(div);
      cs.display;
      div.style.display = 'none';
      cachedValue = cs.display !== 'none';
      div.remove();
    }
    
    return cachedValue;
  };
})();

Comment 6

[Sebastian Zartner [:sebo]]

Thanks Jake!

It's sad that there's still no support for one of the main use cases for transition-behavior and also that the CSSWG missed to add a dedicated @supports keyword for that (see the related resolution for that). So authors have to rely on a JS solution for this.

Sebastian

Comment 7

[Sebastian Zartner [:sebo]]

For reference, I've now filed https://github.com/w3c/csswg-drafts/issues/13387 to discuss whether an @supports keyword should be added for that.

Sebastian