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

Question

I've been wracking my brain over this one, google searches don't really have much in the way of help or even documentation of this problem but it's greatly affecting my current conversion to a mobile-friendly design.

Everywhere I go, everyone's touting using rem-based layouts as the new gold standard, and on the surface the virtues of this approach seem ideal (full accesibility support for both reference pixel based scaling and font-size scaling to support many DPIs and many screen sizes / settings).

However I've run into a rather large snag, I'm finding that Chrome (and possibly all webkit browsers but I don't have a mac atm to test) don't seem to scale the same as the rest.

With the initial setup like this:

html { font-size: 62.5%; }
body { font-size: 1.6rem; }

We should be able to set up all our measurements using 1/10th the pixel size in rems:

.my-element { height: 15rem; } /* 150px */

I've created a simple example that illustrates my problem here: https://jsfiddle.net/gLkpz88q/2/embedded/result/

When you use Chrome and you scale this way out, notice how the layout stops scaling but the content continues.

Compare this to Firefox, IE11, Edge and you don't see this behavior at all, they all scale uniformly and continually.

Here's (Top-Left: Chrome, Top-Right: IE11, Bottom-Left: Edge, Bottom-Right: FireFox) side-by-side:

As you can see this has some terrible implications for layouts if the rem unit scales differently than everything else.

I'm not certain how to proceed with this scenario as it seems like WebKit/Chrome have decided to handle scaling completely differently and this calls in to question all the scaling scenarios going forward.

There's a number of articles advocating just using pixels as the CSS Reference Pixel takes care of mobile scaling rather well:

• Just Use Pixels
• R.I.P. Rem, Viva CSS Reference Pixel!

However these tend to ignore the font-scaling issue, citing it as an unlikely situation.

I did a quick look around at man big mobile friendly/friendlyish sites I could think of from large & successful companies and it seems most of them just use pixels for all their layout needs. (Google, Facebook, Wordpress, Twitter, Bootstrap 3, [and to some extent Bootstrap 4], MDN, and WebPlatform)

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.

Answer 1

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 :)

Answer 2

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

Answer 3

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/

Answer 4

I have faced this issue non-uniform browser zoom in zoom out on my project while setting the base rem . I have used rem in most of the place in the project .so,I had to set base rem based on the screen size dynamically. I will share few ways to set the base rem and issue I faced.The zoom in and zoom out inconsistent is caused because when we zoom out the screen width icreases and when we zoom in the the screen width decreases.So,if we set rem using the media queries or vw it will look inconistent while zooming in and out.

Fixed unit to set base rem like px ,%:

    html{
      font-size:68%;
           or
      font-size:16px;
    }

pros:

• same base rem on all the screen size.
• The browser zoom in zoom out will be consistent

cons:

• As it would be fixed value doesn't change based screen size.
• sometimes the elements can't adjust on small screen size becoz of the specified base rem

Media queries to set base rem:

html {
  font-size: 17px;
}
@media (max-width: 1536px) {
  html { font-size: 15px; }
}
@media (max-width: 1920px) {
  html { font-size: 13px; }
}

pros:

• The base rem changes based on screen size.

cons:

• The browser zoom in zoom out will be inconsistent

vw to set base rem:

    html{
      font-size:1vw;
    }

pros:

• the base rem will change based on the screen size and adjust. If zoom in zoom out is not important for you project.It would give perfect adaptation for the screen.

cons:

• The browser zoom in zoom out will be consistent but the zoom in zoom out won't be working on few elements.so,it might look messy sometimes

Dynamic unit combination to set base rem:

html{
  font-size:calc(.5em+.5vw);
}

pros:

• Just need to adjust em and vw for base rem as we need for one screen.then base rem will change based on the screen size and adjust.
• the zoom in and zoom out will be consistent.