html полный цвет фона в Chrome (приложение для смартфона)

Question

В последнее время я занимаюсь разработкой своей страницы с помощью React, но у меня возникла проблема с некоторыми телефонами, которые не отображают полноцветный фон в части тела. У меня есть следующая структура:

function App() {
 const styles = { container: { backgroundColor: "#333333", height: "100vh" } };
  return (
    <div style={styles.container}>
      <Body/>
    </div>
  );
}

function Body() {
  return (
    <div id="body-set" >
      <div className="container">
        <div id="head-slider" className="transistion">
          <p className="head-desc">....1....</p>
          <p className="head-cont">
            ....long contents....
          </p>
        </div>
      </div>

      <div id="programmer-img-holder">
        <img src={programmer} alt="programmer"/>
      </div>

      <div className="container">
        <div id="head-slider" className="transistion">
          <img className="skill-img" src={skill} alt="skill"/>
          <p className="head-desc">....2....</p>
          <p className="head-cont">
            ....long contents....
          </p>
        </div>
      </div>
    </div>
  );

}

Вот соответствующие коды - CSS:

html,body {
  height: 100vh;
  width: 100vw;
  font-size: 62.5%;
}

#head-slider {
  padding: 1rem;
}

@media (min-width:992px) {
  #head-slider {
    padding: 3.5rem 0;
  }
}

#head-slider p.head-desc {
  text-align: center;
  padding: 0.5rem 0;
  font-size: 2.4rem;
  font-weight: 600;
  font-family: 'Sarabun',
  sans-serif;
}

@media (min-width:992px) {
  #head-slider p.head-desc {
    text-align: center;
    padding: 0.5rem 0;
    font-size: 3.3rem;
    font-weight: 600;
    font-family: 'Sarabun',
    sans-serif;
  }
}


#head-slider p.head-cont {
  text-align: center;
  width: 100%;
  padding: 1rem 0;
  font-size: 2rem;
  font-weight: 200;
  font-family: 'Sarabun',
  sans-serif;
}

@media (min-width:992px) {
  #head-slider p.head-cont {
    text-align: center;
    width: 100%;
    padding: 1rem 0;
    font-size: 2.6rem;
    font-weight: 200;
    font-family: 'Sarabun',
    sans-serif;
  }
}

Когда я проверяю свою страницу через «инструмент разработчика» в Chrome, на некоторых телефонах (Iphone 6/7/8 Plus, Pixel 2 и т. д.) фон Body не заполнен полностью (нижняя часть Body не заполнена - цвет фона отсутствует.). Кроме того, Chrome в моем телефоне Samsung Note9 не отображает полноцветный фон (то же самое в Samsung Inte rnet app: /)

Я уже пробовал много ответов в Stackoverflow, но все еще не могу знать как справиться с этой проблемой.

Кто-нибудь есть идеи?

Спасибо.

// добавлен скриншот проблемы. Iphone 6,7,8: введите описание изображения здесь

Pixel 2xl: введите описание изображения здесь

Answer 1

Этого можно достичь, установив высоту 100% или 100vh из #root вместо #root > [data-reactroot]:

#root {
  height: 100vh;
}

в отношении этой реаги css root div полная высота браузера