tailwindlabs / tailwindcss-forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
https://tailwindcss-forms.vercel.app
MIT License
4.22k stars 223 forks source link

Select input options in Chrome not displaying properly #145

Closed c-zab closed 1 year ago

c-zab commented 1 year ago

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. image

Any ideas why not working on Chrome properly?

adamwathan commented 1 year ago

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 commented 1 year ago

[@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)

Screenshot 2023-08-22 at 1 32 14 PM Screenshot 2023-08-22 at 1 33 08 PM

adamwathan commented 1 year ago

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 commented 1 year ago

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 👍🏻