Bug 245402 – fieldset with legend as flex item of form height inconsistency

• Status: NEW
• Component: Layout and Rendering

From the readme in the repro case for the bug:

"There appears to be a rendering inconsistency in Safari on both desktop and iOS. I also encountered this issue in safari 15 as well on all platforms. At a high level there is some additional space that is being preserved on the <fieldset> element. Strangely, this behavior can be "corrected" on the fly by triggering a repaint on the whole viewport such as resizing the browser window on desktop or an orientation change on iOS."


Repo: https://github.com/chrstntdd/fieldset-flex-bug

[Ahmad Saleem]

Can you try to use:

fieldset {
min-inline-size: min-content !important;
}

and confirm whether it works?

(In reply to Ahmad Saleem from comment #1)
> Can you try to use:
> 
> fieldset {
> min-inline-size: min-content !important;
> }
> 
> and confirm whether it works?

I have added that declaration on the main branch of the repo and the bug is still present.

https://github.com/chrstntdd/fieldset-flex-bug/commit/cd794541472ccf9932bc4952b5ea406f6f56546e

[Ahmad Saleem]

It might be duplicate of bug 220793 and this is not just limited to "flex" but "grid" layout as well.

[Radar WebKit Bug Importer]

<rdar://problem/100433635>

[Ahmad Saleem]

@Reporter - Can you try now with Safari Technology Preview 160, it does have fixes for Legend respecting other than display types like flex etc.?

I am able to reproduce this issue as well, you can see the behavior here:

https://play.tailwindcss.com/9px06uS1Cn

As the original poster says, the bug seems to disappear when clicking into the input element.

Grid does not seem to have this issue.

https://play.tailwindcss.com/3ZEZlXMENR

The other weird thing with this is that it doesn't happen when the legend doesn't render, so you can have flex and flex-direction: column on the form element and the fieldset renders fine until you add a legend, after which it adds the padding as seen above in my comment.

https://play.tailwindcss.com/vHxn6CJIHD

(In reply to john from comment #6)
> I am able to reproduce this issue as well, you can see the behavior here:
> 
> https://play.tailwindcss.com/9px06uS1Cn
> 
> As the original poster says, the bug seems to disappear when clicking into
> the input element.
> 
> Grid does not seem to have this issue.
> 
> https://play.tailwindcss.com/3ZEZlXMENR

This is one MacOS 15.1.1 and Safari Version 18.1.1 (20619.2.8.11.12)