fieldset with legend as flex item of form height inconsistency

• Component: Layout and Rendering
• Status: NEW ---

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