Select input options in Chrome not displaying properly

[c-zab]

What version of @tailwindcss/forms are you using?

v0.5.4

What version of Node.js are you using?

v18.17.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://tailwindcss-forms.vercel.app/

Describe your issue

I added the Select input and the options are not showing in the correct place in my repo. I tested it on the Live Demo and it is the same error. I also tested on incognito mode, same issue. However, when testing in other browsers (Firefox and Safari) it works fine.

Any ideas why not working on Chrome properly?

[adamwathan]

Weird! I can't reproduce this and it's not even really possible to control this with CSS so there's nothing we could even be doing to cause this 😄 Do you have any Chrome extensions installed that could be doing weird stuff with JS? The only way I can imagine this to happen is with some imperative scroll stuff behind a timeout in JS that happens after the select menu has already opened.

[c-zab]

[@adamwathan ] I forgot to mention that it only happens on Mobile View in Chrome (other browsers is okay). In the screenshots below I am using Incognito Mode (no Chrome extensions installed)

[adamwathan]

Hmm still can't reproduce this at all. Does this only happen when Tailwind is being used? My gut is this is happening with just vanilla CSS for you in that exact same scenario as well? If not, what do you have to disable in the dev tools CSS panel to get it to render as expected?

[adamwathan]

Going to close this for now I’m afraid since we can’t seem to find any way to reproduce it :/ going to have to chalk this up to just a weird system-specific thing, and my gut is it happens without Tailwind too since there aren’t any CSS APIs to even control this sort of thing.

If you ever find a bulletproof way to reproduce it on another machine please feel free to open another issue 👍🏻