Bug 164222 – list-item-position is inside for unstyled list items

• Component: DOM
• Status: RESOLVED DUPLICATE

[Venkatesh Babu]

Reduction: https://jsfiddle.net/2qgcuofg/ (bonus original internal reduction in case I've lost some important detail: https://jsfiddle.net/z3du4vss/).


Originally encountered on a live site: http://www.indiastudychannel.com/

In all honesty problem looks lower severity, but like with other interop issues you never know when this would be more impactful.
 
------------ Above description taken from Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=590094 

Details:

For <li> HTML Elements without surrounding <ul> tag has a nonstandard hard coded non-overridable "list-style-position: inside" like behavior. Looks like this behavior is not observed in Gecko based browsers. 

As Phistuck noted: the offending commit here https://bugs.chromium.org/p/chromium/issues/detail?id=590094#c8 

Can someone throw some light on this? I'm just wondering is this the intended behavior. 

Thanks.

[Alexey Proskuryakov]

The change in question is 16 years old :)

https://quickgit.kde.org/?p=kdelibs.git&a=commitdiff&h=f5e6665ad7cbf8208b8194d6f548eac26e8b9d0e

[Venkatesh Babu]

Ha yes, the change predates WebKit. Only Lars Knoll or his colleagues might (possibly) know the reason behind the change :)
Thoughts?

[Ahmad Saleem]

I am able to reproduce this bug using JSFiddle reduction from Comment 0 in Safari Technology Preview 151 and in this - bullet is shown inside "red" border wrapper while in case of other browsers, Chrome Canary 106 behave same as Safari while Firefox Nightly 105 show "bullet" outside of red wrapper.

From Chrome bug mentioned in Comment 0, the latest update is as of 3rd January 2022 and general consensus is following:

-> impact on ::marker - https://bugs.chromium.org/p/chromium/issues/detail?id=590094#c22

-> it was IE quirk, which Microsoft fixed in IE11 and this is quirky behavior from IE7 and before - https://bugs.chromium.org/p/chromium/issues/detail?id=590094#c11

-> It might be something to fix to align with non-quirky Firefox behavior but it will break websites and there is no data from HTTPArchive - https://bugs.chromium.org/p/chromium/issues/detail?id=590094#c14

_______

Just wanted to update latest results. Thanks!

[Ahmad Saleem]

It seems that now all browsers are rendering bullet inside of red container.

> Safari Technology Preview 195
> Chrome Canary 127
> Firefox Nightly 128

@Karl - can you double check and then we can mark this as 'RESOLVED CONFIGURATION CHANGED'?

[Ahmad Saleem]

(In reply to Ahmad Saleem from comment #5)
> It seems that now all browsers are rendering bullet inside of red container.
> 
> > Safari Technology Preview 195
> > Chrome Canary 127
> > Firefox Nightly 128
> 
> @Karl - can you double check and then we can mark this as 'RESOLVED
> CONFIGURATION CHANGED'?

Sorry - Firefox Nightly 128 still render it outside. Ignore me.

[Oriol Brufau]

(In reply to Ahmad Saleem from comment #4)
> it will break websites and there is no data from HTTPArchive

I added a counter in Blink: https://chromestatus.com/metrics/feature/timeline/popularity/5000
~0.78% of page loads get this quirk of forcing outside markers to be inside.

[Ahmad Saleem]

(In reply to Oriol Brufau from comment #7)
> (In reply to Ahmad Saleem from comment #4)
> > it will break websites and there is no data from HTTPArchive
> 
> I added a counter in Blink:
> https://chromestatus.com/metrics/feature/timeline/popularity/5000
> ~0.78% of page loads get this quirk of forcing outside markers to be inside.

Nice! Is it this quirk?

https://searchfox.org/mozilla-central/rev/ec342a3d481d9ac3324d1041e05eefa6b61392d2/layout/style/res/quirk.css#8

/* Quirk: make orphaned LIs have inside bullet (b=1049) */

/* force inside position for orphaned lis */
li {
  list-style-position: inside;
}

/* restore outside position for lists inside LIs */
li :is(ul, ol, dir, menu) {
  list-style-position: outside;
}

/* undo previous two rules for properly nested lists */
:is(ul, ol, dir, menu) :is(ul, ol, dir, menu, li) {
  list-style-position: unset;
}

[Oriol Brufau]

(In reply to Ahmad Saleem from comment #8)
> Nice! Is it this quirk?

This is a similar quirk that Firefox uses when in quirks mode. Firefox follows the spec when in standard mode.

I haven't checked the details for WebKit, but Blink forces the marker to have an inside position when originated by a <li> that has no <ol> nor <ul> ancestor. This happens even in standard mode, and doesn't affect computed values.

See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/style/computed_style.cc;drc=fce0feb440edce302eff80122b4611f210e0957d;l=2732-2743

[Ahmad Saleem]

@Tim - is it fixed with your recent PR - https://commits.webkit.org/287114@main

[Tim Nguyen (:ntim)]

*** This bug has been marked as a duplicate of bug 283738 ***

[Tim Nguyen (:ntim)]

Bug 283738 makes the behavior match Firefox.