Bug 255419

Summary:

Rendering issue with checkbox in flexbox layout

Product:

WebKit

Reporter:

Šime Vidas <sime.vidas>

Component:

CSS

Assignee:

alan <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

Šime Vidas

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

Attachments
rendering in safari, firefox, chrome (494.85 KB, image/png) 2023-04-13 18:38 PDT, Karl Dubost	no flags	Details
without-with-flex (258.89 KB, image/png) 2023-04-13 18:44 PDT, Karl Dubost	no flags	Details
Patch (2.87 KB, patch) 2023-04-16 09:09 PDT, alan	no flags	Details Formatted Diff Diff
Patch (5.53 KB, patch) 2023-04-17 11:33 PDT, alan	no flags	Details Formatted Diff Diff
[fast-cq]Patch (6.36 KB, patch) 2023-04-17 19:01 PDT, alan	no flags	Details Formatted Diff Diff
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.

Karl Dubost

Comment 1 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

Karl Dubost

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

Created attachment 465905 [details] without-with-flex Outlines to visualize the boxes.

Karl Dubost

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

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

Radar WebKit Bug Importer

Comment 4 2023-04-13 18:49:31 PDT

<rdar://problem/108026194>

alan

Comment 5 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)

alan

Comment 6 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)

alan

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

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

alan

Comment 8 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.

alan

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

Created attachment 465940 [details] Patch

alan

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

Created attachment 465947 [details] Patch

alan

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

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

EWS

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

Note You need to log in before you can comment on or make changes to this bug.