New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 644630 link

Starred by 5 users

Issue metadata

Status: Fixed
Owner:
Last visit > 30 days ago
Closed: Mar 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug



Sign in to add a comment

Chrome 53 introduces unwanted spacing in LI elements

Reported by i...@adar.me, Sep 7 2016

Issue description

Chrome Version       : 53.0.2785.89
URLs (if applicable) :
Other browsers tested:
  Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
     Safari: OK 9.1.3
    Firefox: OK 45.3.0
         IE:

What steps will reproduce the problem?
Run this markup: 

<ul style="list-style-position:inside">
    <li>li element 1</li>
    <li>li element 2</li>
</ul>

When used, in addition for the LI element getting pushed inside as expected, the spacing between the bullet and the text increases as well. Remove the CSS rule and the spacing between the bullet and the text is much smaller.

What is the expected result?
For the spacing between the bullet and the text to remain the same regardless of the use of list-style-position:inside.

What happens instead?


Please provide any additional information below. Attach a screenshot if
possible.

This worked before in Chrome 52.
See here: http://stackoverflow.com/questions/39363319/chrome-53-introduces-unwanted-spacing-in-li-elements
 
Also tested in Chrome v52.0.2743.116, and it was OK. After updating, the space appeared.
Components: Blink>Layout

Comment 3 by e...@chromium.org, Sep 15 2016

Owner: glebl@chromium.org
Status: Assigned (was: Unconfirmed)
Would you mind looking into this when you get a chance Gleb?

Comment 4 by glebl@chromium.org, Sep 15 2016

Status: WontFix (was: Assigned)
it's expected behavior. Please see  http://crbug.com/547938 .

Current CSS lists and counters spec suggests 1em for markers: http://www.w3.org/TR/css3-lists/#ua-stylesheet

  li:dir(ltr)::marker {
    margin-right: 1em;
  }
  li:dir(rtl)::marker {
    margin-left: 1em;
  }

I really don't think the current status is the expected behavior.

The space between the marker and the text is way more than 1em, more like 1.6em and it just looks very wrong visually.

First attached file is a screenshot of a list with list-style-position:inside in Chrome, second Safari and third Firefox.
Chrome.png
16.0 KB View Download
Safari.png
16.7 KB View Download
Firefox.png
17.1 KB View Download
Here is a screenshot with the last item having actually 1em spacing. The current spacing when using list-style-position:inside is exactly 1.5em which is NOT 1em ;)
Bildschirmfoto 2016-11-29 um 19.39.41.png
21.6 KB View Download

Comment 7 by mar...@q42.nl, Mar 10 2017

I second the other poster's remarks. This is not 1em, and in earlier versions of Chrome the rendering was alright. We're really hoping for a fix as our users (teachers) are complaining about the ulgy and incorrect spacing, and blaming us for it :P
Screen Shot 2017-03-10 at 15.00.10.png
17.4 KB View Download

Comment 8 by glebl@chromium.org, Mar 10 2017

Status: Assigned (was: WontFix)
Project Member

Comment 9 by bugdroid1@chromium.org, Mar 15 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f0a3c480bad0bcd9432d2193fba26c230092c986

commit f0a3c480bad0bcd9432d2193fba26c230092c986
Author: glebl <glebl@chromium.org>
Date: Wed Mar 15 12:23:40 2017

Use exactly 1em marker margin for list-style:inside items

Fix the interop issue for list-style:inside items. W3C spec
http://www.w3.org/TR/css3-lists/#ua-stylesheet recommends 1em margin for
markers. Unlike other browsers (verified with Edge and Firefox)
Chrome does not follow UA stylesheet recommendation.

The fix is temporarily landed in LayoutListMarker.cpp. Default UA CSS
should be moved to WebKit/Source/core/css/html.css after
crbug.com/457718 is fixed.

BUG= 644630 

Review-Url: https://codereview.chromium.org/2748473003
Cr-Commit-Position: refs/heads/master@{#457059}

[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/fast/lists/inline-before-content-after-list-marker-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/fast/lists/inline-before-content-after-list-marker-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/css1/classification/list_style_position-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/css1/classification/list_style_position-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/css/001-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/css/001-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/lists/004-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/lists/004-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/lists/008-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/lists/008-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/lists/008-vertical-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/lists/008-vertical-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/lists/markers-in-selection-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/fast/lists/markers-in-selection-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/paint/invalidation/list-marker-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/paint/invalidation/list-marker-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/tables/mozilla/bugs/bug30692-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/tables/mozilla/bugs/bug30692-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/virtual/disable-spinvalidation/paint/invalidation/list-marker-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/virtual/disable-spinvalidation/paint/invalidation/list-marker-expected.txt
[add] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/virtual/mojo-loading/css1/classification/list_style_position-expected.png
[add] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/linux/virtual/mojo-loading/css1/classification/list_style_position-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-mac10.10/css1/classification/list_style_position-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-mac10.10/tables/mozilla/bugs/bug30692-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-mac10.10/tables/mozilla/bugs/bug30692-expected.txt
[add] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-mac10.10/virtual/mojo-loading/css1/classification/list_style_position-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-mac10.11/tables/mozilla/bugs/bug30692-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-mac10.11/tables/mozilla/bugs/bug30692-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-mac10.9/fast/lists/008-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-mac10.9/tables/mozilla/bugs/bug30692-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-mac10.9/tables/mozilla/bugs/bug30692-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-retina/tables/mozilla/bugs/bug30692-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac-retina/tables/mozilla/bugs/bug30692-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/css1/classification/list_style_position-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/css1/classification/list_style_position-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/css/001-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/css/001-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/lists/004-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/lists/004-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/lists/008-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/lists/008-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/lists/008-vertical-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/lists/008-vertical-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/lists/markers-in-selection-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/fast/lists/markers-in-selection-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/list-marker-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/list-marker-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/tables/mozilla/bugs/bug30692-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/tables/mozilla/bugs/bug30692-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/virtual/disable-spinvalidation/paint/invalidation/list-marker-expected.png
[add] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/virtual/disable-spinvalidation/paint/invalidation/list-marker-expected.txt
[add] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/virtual/mojo-loading/css1/classification/list_style_position-expected.png
[add] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/mac/virtual/mojo-loading/css1/classification/list_style_position-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/css1/classification/list_style_position-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/css1/classification/list_style_position-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/css/001-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/css/001-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/lists/004-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/lists/004-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/lists/008-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/lists/008-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/lists/008-vertical-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/lists/008-vertical-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/lists/markers-in-selection-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/fast/lists/markers-in-selection-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/paint/invalidation/list-marker-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/paint/invalidation/list-marker-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/tables/mozilla/bugs/bug30692-expected.png
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/tables/mozilla/bugs/bug30692-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/virtual/disable-spinvalidation/paint/invalidation/list-marker-expected.png
[add] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/virtual/disable-spinvalidation/paint/invalidation/list-marker-expected.txt
[add] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/virtual/mojo-loading/css1/classification/list_style_position-expected.png
[add] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/LayoutTests/platform/win/virtual/mojo-loading/css1/classification/list_style_position-expected.txt
[modify] https://crrev.com/f0a3c480bad0bcd9432d2193fba26c230092c986/third_party/WebKit/Source/core/layout/LayoutListMarker.cpp

Comment 10 by glebl@chromium.org, Mar 15 2017

Status: Fixed (was: Assigned)
re: https://bugs.chromium.org/p/chromium/issues/detail?id=644630#c6
thanks for pointing out that the space is not exactly 1em. fixed.

Sign in to add a comment