Bug 313821

Summary:

Numbered list item markers have more spacing in WebKit than other browser engines

Product:

WebKit

Reporter:

beeps <beeps.grey>

Component:

Layout and Rendering

Assignee:

alan <zalan>

Status:

RESOLVED FIXED

Severity:

Minor

CC:

ahmad.saleem792, bfulgham, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 26

Hardware:

All

OS:

All

Attachments:

Description	Flags
Same list rendered in Chrome 147, Firefox 150, and Safari 26.4.	none
Patch	none
Patch	none
Patch	none
Patch	none
[fast-cq]Patch	none

beeps

Reported 2026-05-01 09:10:17 PDT

Created attachment 479416 [details] Same list rendered in Chrome 147, Firefox 150, and Safari 26.4. Maybe a bit of a weird one, but we've had it raised by a user and it seems like a possible 'quick win' for consistency across browsers. Numbered list items in WebKit render a larger space between the numbers (the 'marker') and the subsequent text, when compared to Blink/Chromium and Gecko. This appears to be the case for all WebKit versions across all hardware and operating systems. Demo for reproduction: https://codepen.io/querkmachine/pen/VYmYyEq This additional space does not appear to be applied using `margin` or `padding` properties, as those are absent from WebKit's UA stylesheet and modifying them in author CSS doesn't do anything. The additional space appears to be part of the generated text that WebKit pre-populates the `::marker` pseudo-element with. Safari/WebKit currently doesn't allow authored CSS to change the content of the `::marker` pseudo-element, so it's also not possible to modify what the counter outputs, such as by using CSS counters, to remove the additional space. Currently the only work around to have consistent spacing across all browsers appears to be scrapping native list markers entirely and inserting the item numbers using the `::before` pseudo-element instead. This isn't ideal, given doing so loses some of the nice default rendering that numbered lists have, such as numbers being right-aligned and multi-line list items having subsequent lines being indented. Having this be consistent, whilst not important in the grand scheme of things, would be very nice. (Being able to edit the content of `::marker` would be nice as well, though that's not in the scope of this bug!)

Attachments
Same list rendered in Chrome 147, Firefox 150, and Safari 26.4. (110.72 KB, image/png) 2026-05-01 09:10 PDT, beeps	no flags	Details
Patch (4.01 KB, patch) 2026-05-01 12:28 PDT, alan	no flags	Details Formatted Diff Diff
Patch (455.35 KB, patch) 2026-05-01 15:24 PDT, alan	no flags	Details Formatted Diff Diff
Patch (491.79 KB, patch) 2026-05-01 17:15 PDT, alan	no flags	Details Formatted Diff Diff
Patch (496.17 KB, patch) 2026-05-01 19:41 PDT, alan	no flags	Details Formatted Diff Diff
[fast-cq]Patch (493.27 KB, patch) 2026-05-02 05:40 PDT, alan	no flags	Details Formatted Diff Diff
Show Obsolete (4) View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2026-05-01 09:44:36 PDT

<rdar://problem/176027025>

alan

Comment 2 2026-05-01 09:46:56 PDT

Thank you for filing this bug report and for the great test case. I agree that while this may not be super important in the grand scheme of things, inconsistency is never great.

alan

Comment 3 2026-05-01 12:28:35 PDT

Created attachment 479421 [details] Patch

alan

Comment 4 2026-05-01 12:30:06 PDT

This probably breaks some dump-render-tree tests -let's see what EWS says..

alan

Comment 5 2026-05-01 15:24:39 PDT

Created attachment 479424 [details] Patch

alan

Comment 6 2026-05-01 17:15:31 PDT

Created attachment 479428 [details] Patch