пустое пространство в мобильной версии (угловой 6 мат-диалог)

Question

Итак, у меня проблема с диалоговым окном материала.

Снимок экрана мобильного устройства без хромированной полосы сверху

Снимок экрана мобильного устройства без хромированной полосы сверху

Но когда я открываю диалоговое окно, появляется какая-то белая линия:

Снимок экрана с диалоговым окном

Похоже, это происходит из-за того, что chrome topbar не виден.Есть ли способ исправить это?

UPD: 1 Код диалога:

this.dialog.open(HomeAboutUsComponent, {
  maxWidth: '300px',
  width: '90%',
  height: '80%',
  maxHeight: height + 'px',
  data: this.AboutUs[position]
})

CSS:

html{
   height: 100%;
}

body {
   margin:0;
   font-family: 'Open Sans', sans-serif;
   height: 100%;
}

Также есть стили для прокрутки:

body::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   border-radius: 10px;
   background-color: #F5F5F5;
}

body::-webkit-scrollbar
{
   width: 12px;
   background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb
{
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   background-color: #555;
}

UPD 2: Только что добавлено

html {
   background-color:black;
}

Строка становится черной.

body {
   background-color:black;
}

Черный тоже.

Похоже, что-то не так с контентом.Может быть, app-root или что-то еще.

UPD 3:

app-root {
   background-color:black;
}

Строка белая.

app-root {
   height:100%; 
}

Не помогает.