245402 2022-09-19 16:38:02 -0700 fieldset with legend as flex item of form height inconsistency 2024-12-06 07:04:39 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 15 All All NEW https://bugs.webkit.org/show_bug.cgi?id=220793 InRadar P2 Normal --- 1 chrstntdd webkit-unassigned ahmad.saleem792 bfulgham john simon.fraser webkit-bug-importer zalan oldest_to_newest 1899680 0 chrstntdd 2022-09-19 16:38:02 -0700 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 1900248 1 ahmad.saleem792 2022-09-21 15:43:08 -0700 Can you try to use: fieldset { min-inline-size: min-content !important; } and confirm whether it works? 1900274 2 chrstntdd 2022-09-21 18:42:35 -0700 (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 1900615 3 ahmad.saleem792 2022-09-23 06:00:07 -0700 It might be duplicate of bug 220793 and this is not just limited to "flex" but "grid" layout as well. 1901335 4 webkit-bug-importer 2022-09-26 16:38:17 -0700 <rdar://problem/100433635> 1919319 5 ahmad.saleem792 2022-12-14 14:45:12 -0800 @Reporter - Can you try now with Safari Technology Preview 160, it does have fixes for Legend respecting other than display types like flex etc.? 2079625 6 john 2024-12-06 05:54:56 -0800 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 2079639 7 john 2024-12-06 07:00:37 -0800 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 2079640 8 john 2024-12-06 07:04:39 -0800 (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)