Размер CSS изображения (по размеру экрана) работает по-разному в Firefox и Chromium. ⇐ CSS

[Anonymous]

Следующий файл работает в Firefox так, как задумано: изображение соответствует доступному пространству экрана без полос прокрутки

Код: Выделить всё

Test

* {
box-sizing: border-box;
margin: 0;
}

body {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
background-color: white;
color: black;
}

.head {
text-align: center;
}

.body {
height: 100%;
overflow: auto;
display: grid;
grid-template-columns: auto 1fr auto;
}

.left, .right {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 300%;
background-color: rgba(0,0,0,0.2);
height: 1em;
width: 1em;
margin: auto 0.1em;
border-radius: 0.5em;
}

.center {
text-align: center;
min-width: 0;
min-height: 0;
overflow: auto;
}

.center img {
vertical-align: text-bottom;
max-width: 100%;
max-height: 100%;
padding: 0.2em;
}




HEAD
BLOCK

L

[img]https://placehold.co/1200x900[/img]

R

Однако в Chromium, если окно недостаточно высоко, отображается вертикальная полоса прокрутки и изображение перемещается на 1 пиксель вверх или вниз.
Что это такое? причина этого и как это можно исправить (кроме использования, например, Calc(100% - 1px) вместо 100%)?

Подробнее здесь: https://stackoverflow.com/questions/793 ... d-chromium