Bug 255419

Summary:

Rendering issue with checkbox in flexbox layout

Product:

WebKit

Reporter:

Šime Vidas <sime.vidas>

Component:

CSS

Assignee:

zalan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

akeerthi, changseok, esprehn+autocc, ews-watchlist, glenn, karlcow, koivisto, kondapallykalyan, pdr, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 16

Hardware:

Mac (Intel)

OS:

macOS 13

Attachments:

Description	Flags
rendering in safari, firefox, chrome	none
without-with-flex	none
Patch	none
Patch	none
[fast-cq]Patch	none

Description Šime Vidas 2023-04-13 16:21:40 PDT

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.

Comment 1 Karl Dubost 2023-04-13 18:38:16 PDT

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

Comment 2 Karl Dubost 2023-04-13 18:44:35 PDT

Created attachment 465905 [details]
without-with-flex

Outlines to visualize the boxes.

Comment 3 Karl Dubost 2023-04-13 18:49:04 PDT

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

Comment 4 Radar WebKit Bug Importer 2023-04-13 18:49:31 PDT

<rdar://problem/108026194>

Comment 5 zalan 2023-04-14 18:55:39 PDT

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)

Comment 6 zalan 2023-04-14 19:00:52 PDT

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)

Comment 7 zalan 2023-04-14 19:54:02 PDT

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

Comment 8 zalan 2023-04-15 08:34:24 PDT

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.

Comment 9 zalan 2023-04-16 09:09:21 PDT

Created attachment 465940 [details]
Patch

Comment 10 zalan 2023-04-17 11:33:10 PDT

Created attachment 465947 [details]
Patch

Comment 11 zalan 2023-04-17 19:01:03 PDT

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

Comment 12 EWS 2023-04-17 19:05:58 PDT

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