Bug 292989

Summary:

Marker of list item with non-text content doesn't get rendered.

Product:

WebKit

Reporter:

boltlessengineer

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

bfulgham, karlcow, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

See Also:

https://bugs.webkit.org/show_bug.cgi?id=186564
https://bugs.webkit.org/show_bug.cgi?id=192980

Attachments:

Description	Flags
Preview on Safari Technology Preview	none
rendering in safari, firefox, chrome	none

boltlessengineer

Reported 2025-05-14 08:39:10 PDT

Created attachment 475225 [details] Preview on Safari Technology Preview I found that list marker of list item with non-inline content doesn't get rendered. Imagine when you put code block as list item content: ```html <html> <head> <style> article pre { border: solid 1px; padding: 1ch; overflow-x: auto; /* this affects the list marker */ } </style> </head> <body> <article> <ol> <li>text</li> <li> <figure><pre><code>code block</code></pre></figure> </li> <li>text</li> </ol> </article> </body> </html> ``` When rendered, 2nd list item's marker is invisible even with `list-style-type: decimal` style. Doesn't happen on Chromium or Gecko

Attachments
Preview on Safari Technology Preview (12.63 KB, image/png) 2025-05-14 08:39 PDT, boltlessengineer	no flags	Details
rendering in safari, firefox, chrome (1.05 MB, image/png) 2025-05-15 19:59 PDT, Karl Dubost	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Karl Dubost

Comment 1 2025-05-15 19:34:52 PDT

This looks very similar if not the same than Bug 186564

Karl Dubost

Comment 2 2025-05-15 19:56:01 PDT

yes this is about overflow applied to list item children: <style>ul {background-color:gold;}</style> <ul><li><span style="overflow:hidden;">text in span</span></li></ul> <ul><li><div style="overflow:hidden;">text in div block</div></li></ul> <ul><li><div style="overflow:hidden;display:inline-block;">text in div inline-block</div></li></ul>

Karl Dubost

Comment 3 2025-05-15 19:59:48 PDT

Created attachment 475259 [details] rendering in safari, firefox, chrome Safari Technology Preview 18.4 20622.1.10.19.1 Firefox Nightly 140.0a1 14025.5.8 Google Chrome Canary 138.0.7181.0 7181.0

Radar WebKit Bug Importer

Comment 4 2025-05-21 08:42:39 PDT

<rdar://problem/151775835>

alan

Comment 5 2025-06-05 19:16:34 PDT

WebKit puts the marker renderer next to the list item content, inside existing containers (<pre> in this case) which means that whenever we clip the container the marker disappears as well. To fix this we need to re-architect our list marker handling to not rely on existing block containers. ---------- -- LI RenderListItem at (40,0) size 1456x20 renderer (0x11826c100) layout box (0x0) node (0x1181c43d0) ---------- -- PRE RenderBlock at (0,0) size 1456x20 renderer (0x1181cc680) layout box (0x118100340) node (0x118264100) ---------- -- RenderListMarker (::marker) at (-20,1) size 16x18 renderer (0x1182700c0) layout box (0x118100410) ---------- -- #text RenderText renderer (0x11805c240) layout box (0x1182780c0) node (0x1180a4580) length->(6) "foobar"

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