title: Chrome 53 introduces unwanted spacing in LI elements
body: <p>Starting Chrome 53 we have noticed a new CSS-related issue.</p>
  
  <p>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. </p>
  
  <p>For example, here: <a href="https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/using-the-mfpf-sdk/" rel="noreferrer">https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/using-the-mfpf-sdk/</a></p>
  
  <p><a href="https://i.stack.imgur.com/o2MiZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/o2MiZ.png" alt="enter image description here"></a></p>
  
  <p>Is this a spec change that requires updating our CSS or an actual bug in the rendering engine?</p>
  
  <p><strong>Update</strong>: It is seemingly happening because of <code>list-style-position:inside</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul style="list-style-position:inside"&gt;
      &lt;li&gt;li element 1&lt;/li&gt;
      &lt;li&gt;li element 2&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>How can we address this?</p>