title: Chrome not respecting rem font size on body tag?
body: <p>I've taken to using <code>rem</code>'s to size fonts in recent projects, then using px as a fallback for older versions of IE.</p>
  
  <p>I've also been setting a <code>font-size</code> of 62.5% on the<code>html</code> so I can more easily set font sizes later on in the stylesheet, I then set a font-size of <code>1.4rem</code> on the body so unstyled elements have a base <code>font-size</code> of at least 14 pixels, see the code below:</p>
  
  <pre><code>html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
  body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
  </code></pre>
  
  <p>The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.</p>
  
  <p><a href="http://jsfiddle.net/HfwSm/" rel="noreferrer">SEE FIDDLE</a> (HTML copied below for future reference)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-GB"&gt;
      &lt;head&gt;
          &lt;title&gt;Page Title&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;This is a test, this font should have font-size of 14px.&lt;/p&gt; 
          &lt;p&gt;This is a test, this font should have font-size of 14px.&lt;/p&gt; 
          &lt;p&gt;This is a test, this font should have font-size of 14px.&lt;/p&gt; 
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Remember, you might need to hit run once or twice in Chrome to see said effect.</p>
  
  <p>Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% <code>font-size</code> on the <code>html</code> element (I realise there are arguements against doing so)?</p>