Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dialog element styles are not reset by preflight #11070

Closed
eranhirsch opened this issue Apr 23, 2023 · 3 comments
Closed

Dialog element styles are not reset by preflight #11070

eranhirsch opened this issue Apr 23, 2023 · 3 comments

Comments

@eranhirsch
Copy link
Contributor

What version of Tailwind CSS are you using?

latest (3.3.1)

What build tool (or framework if it abstracts the build tool) are you using?

create-react-app (post-css)

What version of Node.js are you using?

n/a

What browser are you using?

Chrome (Version 112.0.5615.138 (Official Build) (64-bit))

What operating system are you using?

Windows 11 (22H2)

Reproduction URL

https://play.tailwindcss.com/H833bFMZwQ

Describe your issue

HTML Dialog elements are styled by the useragent, specifically a padding of 16px is added, a border of 1, and text and background colors are set. All of this feels like stuff missing from preflight. It actually took me some time debugging just to find out that the padding is coming from the useragent, as I was not expecting it.

Some links:

@eranhirsch
Copy link
Contributor Author

PR: #11069

@adamwathan
Copy link
Member

Hey thanks for bringing this up! Let's keep the discussion for all of this in the PR so we can handle it in one place 👍 Going to close this as an issue and we can make a decision about this over there instead.

@malobre
Copy link

malobre commented Mar 14, 2024

There are still issues on latest firefox (123), which sets max-width & max-height that prevents the backdrop from filling the viewport:

dialog {
  /* non-exhaustive */
  max-width: calc(100% - 6px - 2em);
  max-height: calc(100% - 6px - 2em);
}

Source (not a permalink): https://searchfox.org/mozilla-central/source/layout/style/res/html.css#810-811

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

No branches or pull requests

3 participants