Test page: https://jsbin.com/cifaziq/edit?html,css,output On the test page, I put checkboxes and their labels in a simple CSS flexbox layout. In desktop Safari, the checkboxes are smaller, and there is no spacing around them, and when their labels become longer, the text appears on top of the checkbox. This issue does not occur in Chrome and Firefox. Additionally, the checkboxes are vertically centered in these browsers, but that seems to be a separate interop issue.
Created attachment 465904 [details] rendering in safari, firefox, chrome Tested on macOS 13.4 --- Safari Technology Preview 167/16.4 18616.1.8.2 Firefox Nightly 114.0a1 11423.4.13 Google Chrome Canary 114.0.5713.0 5713.0
Created attachment 465905 [details] without-with-flex Outlines to visualize the boxes.
`input {flex: 1 0 auto;}` makes it slightly better.
<rdar://problem/108026194>
It looks like our checkbox has visual overflow which eats into the 2px margin right. B-------- -- INPUT RenderBlock at (2,3) size 7.44x12 renderer (0x14b003e70) layout box (0x0) node (0x14b003a40) (layout overflow 0,0 7.44x12) (visual overflow 0,0 9x12)
It looks like we do something odd while sizing the _INPUT_ flex item producing overlapping content and visual overflow B-------- -- DIV RenderFlexibleBox at (0,0) size 30x36 renderer (0x14b0040b0) layout box (0x0) node (0x14b003940) (layout overflow 0,0 46.66x36) (visual overflow 0,0 46.66x36) B-------- -- INPUT RenderBlock at (2,3) size 0x12 renderer (0x14b003e70) layout box (0x0) node (0x14b003a40) (layout overflow 0,0 0x12) (visual overflow 0,0 10x12) B---YG--- -- RenderBlock at (4,0) size 42.66x36 renderer (0x14b004370) layout box (0x14b0044b0)
The preferred minimum width of the input field is 0px. No wonder we produce overlapping content.
This is equivalent to the following case where the first flex item has non-zero fixed width but collapsed to 0px due to insufficient horizontal space. <style> .flex_box { display: flex; max-width: 30px; } </style> <div class=flex_box> <div style="width: 12px; height: 12px;"></div> <div>foobar</div> </div> We need to teach preferred with computation to account for such intrinsic content.
Created attachment 465940 [details] Patch
Created attachment 465947 [details] Patch
Created attachment 465953 [details] [fast-cq]Patch
Committed 263052@main (a6b2a57ab860): <https://commits.webkit.org/263052@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 465953 [details].