Rem-Based Layouts, Zooming on chrome is inconsistent, PX vs REM

Don't use this CSS { font-size: 62.5%; } body { font-size: 1.6rem; } it causes more problems that it is worth, due to the fact that you will get different results on browsers that use different base font sizes. Just use this site to calculate the correct rem values. http://pxtoem.com/

This should give you consistent results. https://jsfiddle.net/WizardCoder/gLkpz88q/3/

UPDATE https://jsfiddle.net/WizardCoder/gLkpz88q/5/

That's because Chrome's behavior of setting a minimum font-size, so if you zoom-out, chrome will set the minimum font-size to 6px (12px for chinese and japanese version). So your div will have a minimum width as it depends on your base font-size (which can't be smaller then chrome's minimum).

See also:

Chrome will increase the font size when zooming out

[Edit] Additional Information:

Chromium Tickets & Discussions On this topic:

https://bugs.chromium.org/p/chromium/issues/detail?id=16875 https://bugs.chromium.org/p/chromium/issues/detail?id=36429

-webkit-text-size-adjust Support Dropped, so the viable solution for this behavior is not reliable anymore:

https://trac.webkit.org/changeset/145168/webkit

I'm going to start my answer by addressing your closing statement first, purely because it caught my eye (besides the humongous bounty).

"Is Chrome the new Standards-Busting IE? Or am I doing something horribly wrong? I'm tempted to just use pixels at this point for consistency."

Yes and no. I have more problems with things not working in WebKit browsers than I do in any other mainstream browser engine, but after investigating the individual issues, I generally find that it's because WebKit tends to stick to the rules provided by W3C more rigidly than others.

Most other browser engines seem to be very lenient with developers, and I love them for this, but we can't necessarily crucify WebKit for following the rules.

To extend the above statements into the rest of your question, I skimmed through W3C document regarding relative font lengths. Under the heading for rem units you will notice the first line stating:

Equal to the computed value of ‘font-size’ on the root element.

Unfortunately, font-size in itself is relatively open to interpretation by your browser engine.

Cyrix's answer is correct in that Chrome will adjust your font size based on a minimum font-size that it has built in to the engine. To solve your problem easily, you could use the text-size-adjust or the newer font-size-adjust rule on your container element to prevent this:

* { /* Replacing "*" with ".my-element" would probably be better for the rest of your site*/
    -webkit-text-size-adjust: none;
    -webkit-font-size-adjust: none;
}

The problem however is that older versions of Chrome don't accept font-size-adjust, and newer version only accept font-size-adjust and only when experimental features are enabled.

In closing, to answer the rest of your questions, rem and em is a wonderful unit of measurement if you are working with actual text content etc. Think in the lines of:

• If you want your<h1>'s to always be about 25% bigger than your body text h1 { font-size: 1.25rem; }
• If the height of your header bar must always be 3 times the height of the line of text inside it .header { height: 3em; }

If however you are working with a container type block that needs to fit a specified content block on the inside, it's always better to work with something more stable. Keep in mind, stability does not mean unresponsive.

Take this for example:

.my-element {
  width: 95%;
  margin: auto;
  max-width: 600px;
}

This will float your element nicely in the middle of the page, whilst keeping the element at a size that fits the content inside it, and if the screen size decreases to a point smaller than your .my-element height, it will adjust accordingly.

In short.

• Yes, Chrome breaks things on a scale that makes IE jealous, but that's ok.
• Yes, a lot of people do try to punt using relative font units as the best thing to do, however contrary to what they may say, you don't need to use it for everything.
• Your end result should be a responsive web page. Your means to achieving this will differ based on the content you have.
• Font scaling is a influencing factor that is most likely going to be around for a while, if you are worried about how it may affect your web page, ensure that only the elements that need to be scaled in relation to your font, will scale with your font.
• "I'm tempted to just use pixels at this point for consistency." This is the logical conclusion in most cases, so go for it :)