11

Starting Chrome 53 we have noticed a new CSS-related issue.

This issue can also be seen in Vivaldi (which is based on the same engine as Chrome). The same issue is not seen in Safari or Firefox or Chrome 52.

For example, here: https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/using-the-mfpf-sdk/

enter image description here

Is this a spec change that requires updating our CSS or an actual bug in the rendering engine?

Update: It is seemingly happening because of list-style-position:inside.

<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.

How can we address this?

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
  • Someone marked this for closure because it's not about programming? Are you kidding me...? It's about CSS. It is completely on-topic. – Idan Adar Sep 07 '16 at 07:18
  • No, they voted to close because of this "Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error **and the shortest code necessary to reproduce it in the question itself.** Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example." Emphasis mine. Please provide a test case, and don't just link to off-site resources. – Bram Vanroy Sep 07 '16 at 07:21
  • Understood. Done. – Idan Adar Sep 07 '16 at 07:29
  • Still there in canary (55). File a bug, and they'll tell you if they're following specs, then open one in other browsers. – Kaiido Sep 07 '16 at 07:55
  • 2
    Done. See here: https://bugs.chromium.org/p/chromium/issues/detail?id=644630 – Idan Adar Sep 07 '16 at 08:00
  • 1
    According to a google engineer in the issue above, this is an expected change to align with the spec. – Idan Adar Oct 07 '16 at 05:52

1 Answers1

4

Can't say if this is a quirk or a spec change, but a workaround would be to set the list-style to outside, and instead of padding use a left margin:

.tutorial .sidebar .navmenu-default .navmenu-nav.dropdown-menu>li.active>ul>li {
      list-style-position: outside;
}
.tutorial .sidebar ul {
    margin-left: 10px;
    padding: 0;
}
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239