1241172 - li::marker with flexbox is placed on a slipped position

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Ryo Kato [:r_kato]]

Attachment: flex_div_marker.html

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:46.0) Gecko/20100101 Firefox/46.0
Build ID: 20160119030232

Steps to reproduce:

1. Open the attached flex_div_marker.html

This HTML file includes <li> which has <div> applied `display: flex;`.


Actual results:

If <ul> or <ol> has the default rule `list-style-position: outside;`, li::marker is placed on a slipped position. Apparently, flexed ol-li seems not to have this issue, but subtle slipping is occurred :)

The examples with `list-style-position: inside;` are for Chromium.


Expected results:

They should be rendered in the same way whether `display: flex;` are applied or not.

Comment 1

[Ryo Kato [:r_kato]]

I've also reported a similar issue to Chromium.
https://code.google.com/p/chromium/issues/detail?id=579601

Comment 2

[Ryo Kato [:r_kato]]

Attachment: 2016_01_20.jpg

Attached a screenshot which was taken with Firefox 46.0a1 (2016-01-20).

Comment 3

[Daniel Holbert [:dholbert]]

Thanks for filing the bug! One clarification, if you don't mind:

(In reply to Ryo Kato from comment #0)
> Expected results:
> 
> They should be rendered in the same way whether `display: flex;` are applied or not.

Just to clarify: is the problem that the bullets are placed a few pixels too high? (That's the main difference that I see between "flexed div line" and the other bulleted things in your screenshot & testcase.)

(Asking because I'm not 100% sure what you mean by "slipping" / "slipped position".)

Comment 4

[Ryo Kato [:r_kato]]

Thank you for checking this issue!

(In reply to Daniel Holbert [:dholbert] from comment #3)
> Just to clarify: is the problem that the bullets are placed a few pixels too
> high? (That's the main difference that I see between "flexed div line" and
> the other bulleted things in your screenshot & testcase.)

Yes, the problem is the bullets are placed a few pixels high. However, the difference is so subtle that we can't recognize it. So, the priority might be lower than other issues ;)

Comment 5

[Mats Palmgren (inactive)]

The rendering in a current Nightly (57.0a1 (2017-08-29)) on Linux looks correct to me.
http://nightly.mozilla.org/

Please reopen if the problem still occurs on other platforms.

Comment 6

[Daniel Holbert [:dholbert]]

Yup, looks like this is fixed.

* The marker used to be too high (as shown in the screenshot).
* Then in Nightly 2016-10-07, it changed to be too low instead -- that change likely came from this cset:
https://hg.mozilla.org/mozilla-central/rev/32aa05912bbb
> Bug 1307806 - [css-grid][css-flexbox][css-align] Implement nsLayoutUtils::GetFirstLineBaseline for flex/grid containers. r=dholbert

* Then, in Nightly 2016-10-12, it changed to be just right -- that change likely came from this cset:
https://hg.mozilla.org/mozilla-central/rev/2e88bcc7f1bc
> Bug 1306894 Part 1: Cache baseline from nsFlexContainerFrame::Reflow() for use in later calls to GetLogicalBaseline(). r=dholbert 

--> Adding a dependency on that second bug, since that's what seems to have fixed this.