title: Chrome does not keep consistent rem units on zoom-in
body: <p>I want to make use of <code>rem</code> units in CSS, so I set a font-size to my <code>&lt;html&gt;</code> tag so I can set child elements with <code>rem</code> dimensions. The problem however is that when you zoom in on Chrome, the <code>font-size</code> style seems to change relative to zoom level, which causes the dimensions of elements with <code>rem</code> units to change relative to the level of zoom. See the example below in Chrome:</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-js lang-js prettyprint-override"><code>window.onresize = function() {
    console.log(getComputedStyle(document.body.parentElement, null).getPropertyValue("font-size"));
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
      font-size: 7px;
  }
  body {
      font-size: 2em;
  }
  .box {
      width: 10rem;
      height: 10rem;
      background: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="box"&gt;&lt;/div&gt;
          &lt;p&gt;foo bar baz&lt;/p&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To see the effect, press to run the snippet, then click to view full screen, and zoom out in Chrome. When zoomed out past 75% you'll see that the box does not change size on your screen, while the whole page is supposed to change zoom level.</p>
  
  <p>Also, as you can see in the console, the computed style for <code>&lt;html&gt;</code> is <code>font-size: 12px</code> when the zoom level is <strong>25%</strong>, which is a direct contradiction to the css styles specified.</p>
  
  <p>This does not happen in Firefox, so I would like to know: how can I use <code>rem</code> units while keeping consistent behaviour across browsers when zooming?</p>