Использование rem для задания размеров элемента

[Tascan]

Всем привет.

Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem.

И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код:

html {
  font-size: 10px;
}
.box {
  background: red;
  width: 100px;
  height: 400px;
}

То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px.

Но стоило изменить единицы измерения в высоте:

html {
  font-size: 10px;
}
.box {
  background: red;
  width: 100px;
  height: 40rem;
}

И вот тут уже появляется проблема. При уменьшении масштаба страницы до 50% к размеру высоты: в Google Chrome и Yandex браузерах добавляется дополнительные 80px, в Opera итоговая высота элемента увеличивается до 960 px. А вот в Firefox всё нормально и по итогу выходят те же 400px.

Подскажите в чём тут проблема? Это особенности rem или браузеров на основе WebKit?

И вообще, я понимаю, что многие советуют явно высоту элементов не задавать, но если это необходимо, то какие единицы измерения посоветуете для этого использовать?