Bug 302099 – WebKit handles text layout inconsistently depending on `list-style-type`

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Jarod Gowgiel]

Created attachment 477321 [details]
Screenshot of the included CodePen output on Safari

Overview:

In Safari (verified on macOS and iOS) nested text elements are positioned differently depending on their `list-style-type` even when all other styles are identical. This does not occur in Chrome, and seems like an unclear and unintentional difference, especially in nested elements.

This issue occurs in `ul` and `ol` elements. Even when all other styles are the same, and even when text is nested and contained in other `div` or `span` elements, the layout of these elements is still affected by the `list-style-type`.

Steps to Reproduce:

I've prepared a small, minimally reproducible example that shows the misalignment in WebKit based browsers: https://codepen.io/JarodG/pen/yyeWWer

1. Open the attached CodePen in Safari and Chrome.
2. Notice: in Safari, the letter "J" is positioned in two different places in the two examples and has a different size, where only the `list-style-type` property has changed.
    - The size difference is significant - with `list-style-type: disc` (the default from the useragent stylesheet) the `span` has a 12px width and 18px height, whereas with `list-style-type: none` the nested span has a 5px width and a 16px height.
3. Compare this to Chrome (and, what seems like the rational behavior) where the `list-style-type` does change the appearance of the list style, but does not impact the layout of nested HTML nodes.

Expected Results:

Text that is nested inside of a `ul` or `ol` should have the same layout regardless of `list-style-type`.

Additional Builds and Platforms:

Verified on macOS (Version 26.0.1 (21622.1.22.11.15)) and on iOS 26.0.1.

Additional Information:

This layout difference can technically be fixed by setting `list-style-type: none;`, but because of the previous decision by WebKit maintainers to consider such elements as not being a part of the "accessibility tree" (https://bugs.webkit.org/show_bug.cgi?id=170179#c1) this would require every `ul` element to have `list-style-type: none` and `role="list"` just to fix a layout inconsistency, which seems unreasonable.

[Radar WebKit Bug Importer]

<rdar://problem/164650313>

[alan]

Created attachment 477848 [details]
Patch

[alan]

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

[EWS]

Committed 304947@main (2062ed738886): <https://commits.webkit.org/304947@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 477849 [details].