Я наткнулся на очень странный случай, когда 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. Чтобы увидеть эффект, измените размер панели с красной пунктирной рамкой.