Bug 255419 – Rendering issue with checkbox in flexbox layout

• Component: CSS
• Status: RESOLVED FIXED

[Šime Vidas]

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.

[Karl Dubost]

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

[Karl Dubost]

Created attachment 465905 [details]
without-with-flex

Outlines to visualize the boxes.

[Karl Dubost]

`input {flex: 1 0 auto;}` makes it slightly better.

[Radar WebKit Bug Importer]

<rdar://problem/108026194>

[alan]

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)

[alan]

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)

[alan]

The preferred minimum width of the input field is 0px. No wonder we produce overlapping content.

[alan]

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.

[alan]

Created attachment 465940 [details]
Patch

[alan]

Created attachment 465947 [details]
Patch

[alan]

Created attachment 465953 [details]
[fast-cq]Patch

[EWS]

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