В Chrome при включении и выключении панели инструментов устройства мы обнаруживаем ошибку CSS. Если мы загрузим страницу с уже имеющейся панелью инструментов устройства, все будет выглядеть хорошо.
Если мы активируем панель инструментов устройства после загрузки страницы или если мы включим и выключим его, мы получим белый интервал справа и снизу. Также появится небольшое белое пространство между нижним колонтитулом и треугольником (нижний правый угол).
Проблема была обнаружена в контейнере Grid с установленным интервалом.
<Grid container spacing={3}>
<Grid item xs={12}>
</Grid>
</Grid>
https://material-ui.com/components/grid/#spacing
Если мы удалили spacing или установили spacing={0}, все начало работать нормально.
При дальнейшем изучении этого вроде бы из-за negative margin. У нас также есть горизонтальная и вертикальная прокрутка, когда у нас был установлен интервал, что еще раз подтверждает теорию.
https://material-ui.com/components/grid/#negative -margin
Я не понимаю, почему результат будет другим, если был использован переключатель устройства. Это ошибка в Chrome или чего-то ожидаемого?