rem units do not affect DIVs in Chrome - side-effect of minimum font size setting

问题

I've stumbled upon a very bizarre case, where rem units were not affecting DIVs (and potentially all other block elements), but were still effective against text (and I suspect all other inline elements). This was happening on one Windows computer only and only in Chrome 74. On all other platforms (Linux, Mac OS X) and other browses (even legacy Safari and in Canary, which is at Chrome 76 at the moment it worked as expected).

I had no chance to test it extensively, but I've witnessed it myself and wasn't able to detect the source of the problem. I tried it in incognito mode as well, so no cache or third party extensions should have affected it.

Has anyone encountered it or has any solution? I've tested https://youtube.com/tv (which is built with rems) on the very same computer and it scaled properly. The only difference between my site and YouTubes is that I set the fontSize on the root element in pixels rather than in percents.

Any ideas?

const updateRatio = () => {
  const ratio = Math.min(window.innerWidth / 640, window.innerHeight / 480);
  document.querySelector(":root").style.fontSize = `${ratio}px`;
};
window.addEventListener("resize", updateRatio);
updateRatio();

#app {
  border: 2px dashed red;
  width: 320rem;
  height: 240rem;
}

<div id="app"></div>

Codesandbox: https://codesandbox.io/s/competent-resonance-dn1bn. To see the effect, resize the panel with the dashed red box.

回答1:

Turns out Chrome has this setting - "Minimum font size" (chrome://settings/fonts?search=minimum). So if you manage to make the reference fontSize smaller than what is set there, whole rem logic will break.

Here's how it was set in the problematic Chrome.

来源：https://stackoverflow.com/questions/56404524/rem-units-do-not-affect-divs-in-chrome-side-effect-of-minimum-font-size-settin

标签

css

google-chrome

font-size

typography

rem