Created attachment 8710023 [details] 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.
I've also reported a similar issue to Chromium. https://code.google.com/p/chromium/issues/detail?id=579601
Created attachment 8710333 [details] 2016_01_20.jpg Attached a screenshot which was taken with Firefox 46.0a1 (2016-01-20).
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".)
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 ;)
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.
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.