Переполнение в Chrome, но не в Firefox

Question

Я разрабатывал сайт на Firefox, и теперь он отлично работает для всех устройств на Firefox, но ужасно переполняется на мобильном Chrome. Я добавил яркие цвета и красные границы, чтобы помочь в отладке, и я не могу понять, что вызывает это.

Эта ситуация в адаптивном режиме и на физических устройствах.

Префиксы добавляются в мой CSS через https://autoprefixer.github.io/

Вот соответствующий CSS:

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid red;
}

html, body {
    overflow: hidden !important;
}

html {
    background: green !important;
    max-height: 100vh !important;
    max-width: 100vw !important;
}

body {
    background: white;
    overflow: hidden;
    height: 100vh;
}

Вот как это выглядит на Chrome

И как это должно выглядеть на firefox.