物资单位不会影响Chrome中的DIV

Question

我偶然发现了一个非常奇怪的情况，其中rem个单元不会影响DIV（可能还有其他所有块元素），但是仍然可以有效地防止文字（我怀疑其他所有元素内联元素）。这仅在一台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具有此设置-“最小字体大小”（chrome：// settings / fonts？search = minimum）。因此，如果您设法使引用fontSize小于此处设置的值，则整个rem逻辑将中断。

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