Chrome 53 introduces unwanted spacing in LI elements

Question

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/

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?

Answer 1

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;
}