rem 单位不影响 Chrome 中的 DIV - 最小字体大小设置的副作用

Question

我偶然发现了一个非常奇怪的案例，其中 rem 单位没有影响 DIVs（可能还有所有其他块元素），但对文本仍然有效（我怀疑所有其他内联元素）。这仅发生在一台 Windows 计算机上，并且仅发生在 Chrome 74。在所有其他平台（Linux、Mac OS X）和其他浏览器（甚至旧版 Safari 和 Canary，它在 Chrome 76 时按预期工作）。

我没有机会对其进行广泛测试，但我亲眼目睹了它，无法检测到问题的根源。我也在隐身模式下尝试过，所以缓存或第三方扩展应该不会影响它。

有没有人遇到过或者有什么解决办法？我已经在同一台计算机上测试了 https://youtube.com/tv（使用 rems 构建）并且它可以正确缩放。我的网站和 YouTube 之间的唯一区别是我在根元素上设置 fontSize 以像素为单位而不是以百分比为单位。

有什么想法吗？

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。要查看效果，请使用红色虚线框调整面板大小。

Answer 1

原来 Chrome 有这个设置 - "Minimum font size" (chrome://settings/fonts?search=minimum)。因此，如果您设法使引用 fontSize 小于此处设置的值，则整个 rem 逻辑将中断。

这是在有问题的 Chrome 中的设置方式。

rem 单位不影响 Chrome 中的 DIV - 最小字体大小设置的副作用

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

css

google-chrome

font-size