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

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

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

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:

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.

Solution

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