Skip to content

Conversation

thecrypticace
Copy link
Contributor

@thecrypticace thecrypticace commented Aug 25, 2025

We introduced an accidental breaking change a few months ago in 4.1.5 with #17812.

We added visibility to the property list in transition which unfortunately only applies its change instantly when going from invisible -> visible.

I've checked display, content-visibility, and pointer-events and they apply their change instantly (as best I can tell) when transitioning by default. And overlay only "applies" for discrete transitions so it can stay as well.

The spec has this to say about animating visibility:

For the visibility property, visible is interpolated as a discrete step where values of p between 0 and 1 map to visible and other values of p map to the closer endpoint; if neither value is visible then discrete animation is used.

This means that for visible (t=0) -> hidden (t=1) the timeline looks like this:

  • t=0.0: visible
  • t=0.5: visible
  • t=0.999…8: visible
  • t=1.0: invisible

This means that for invisible (t=0) -> visible (t=1) the timeline looks like this:

  • t=0.0: invisible
  • t=0.000…1: visible
  • t=0.5: visible
  • t=1.0: visible

So the value is instantly applied if the element is initially invisible but when going the other direction this is not the case. This happens whether or not the transition type is discrete.

While the spec calls out display as working similarly in practice this is only the case when transition-behavior is explicitly set to allow-discrete otherwise the change is instant for both directions.

Fixes #18793

@thecrypticace thecrypticace requested a review from a team as a code owner August 25, 2025 15:30
@thecrypticace thecrypticace merged commit ce9b290 into main Aug 25, 2025
7 checks passed
@thecrypticace thecrypticace deleted the fix/drop-visibility-from-transition branch August 25, 2025 18:30
thecrypticace added a commit to tailwindlabs/tailwindcss.com that referenced this pull request Sep 5, 2025
See tailwindlabs/tailwindcss#18795

This should be merged since 4.1.13 is out.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Default transition-property with visibility breaks animations
2 participants