search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.02k stars 1.03k forks source link

`Transition` does not respect responsive `display` styles from the parent element #3328

Open anniegiang-octave opened 1 week ago

anniegiang-octave commented 1 week ago

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.0.4

What browser are you using? Chrome Version 126.0.6478.114 (Official Build) (arm64)

Reproduction URL https://kw6kvd-3000.csb.app/

Sandbox

Describe your issue

  1. Open the reproduction URL above. You should see two texts that have colored backgrounds. Only the red one is rendered inside of a Transition.
  2. In Chrome, open the inspector and toggle the device toolbar. Set the dimensions to be responsive.
  3. Decrease the screen width until you know longer see both texts.
  4. Increase the screen width until you see the yellow one.

Expected behavior: In step 4, the red one should also appear at breakpoints greater than md as specified in the parent div but it doesn't appear.

It's worth noting that this issue does not happen with the React + Tailwind boilerplate sandbox and versions for the following packages:

"@headlessui/react": "2.0.4", "react": "18.3.1", "react-dom": "18.3.1"

https://n5lf4f-5173.csb.app/

Sandbox

thecrypticace commented 1 week ago

I get a "Devbox not found" error and "Unauthorized Preview" from your reproduction(s). Any chance you could update them?

anniegiang-octave commented 1 week ago

I get a "Devbox not found" error and "Unauthorized Preview" from your reproduction(s). Any chance you could update them?

@thecrypticace updated the sandbox links