Content doesn't fit dialog when page uses border-box

[xStrom]

The core issue

When a page uses border-box, which is rather common because bootstrap uses it:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Then the content will not fit the dialog, because both this polyfill & Chrome set the dialog width to fit-content (which matches the content's width), but also set a padding of 1em. With border-box the padding must be included in the width.

An example

You can see this issue in action. Use Chrome as it doesn't include the polyfill. However I've locally tested with the polyfill as well and the issue is the same.

Prior art

This issue has been also reported on the Chromium tracker. It's over a year old by now, so probably won't get fixed any time soon.

Comment 4 on that issue mentions this polyfill, specifically issue #15. The comment claims that this issue was fixed in the polyfill, however the linked issue #15 contains roughly zero information and I wasn't able to find any related commits during the issue closing time either. In addition, I tested the polyfill just now and the issue seems alive and well.

Proposed solution

If we set the box-sizing of dialog to content-box:

dialog {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

Then the 1em padding doesn't have to be accounted for in the width and fit-content creates just enough width to fit the content, even when the rest of the page uses border-box.

In addition, because the CSS polyfill always applies even to Chrome, this would work as a fix for Chrome.

[samthor]

Well, this looks like an issue with the spec and/or Chrome's implementation. We try to match that. I'm happy to have a discussion about it though.

[xStrom]

As evidenced by my example this issue no longer exists in stable Chrome. Nor can it be reproduced by the code provided in the chromium tracker. So something has been fixed in Chrome since July, perhaps the way fit-content works, but I'm not sure.

I have since stopped using the dialog element, so I'm not going to dig deeper right now. I guess this issue can be closed for now.

[samthor]

This is fixed in Chrome and I can't reproduce any issues with the polyfill.