Dialog element styles are not reset by preflight

[eranhirsch]

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:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
• https://searchfox.org/mozilla-central/source/layout/style/res/html.css#790-805
• https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css#1084

[eranhirsch]

PR: #11069

[adamwathan]

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]

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