Это очень нишевый вопрос, но я создаю приложение React и имею целевую страницу, где основным элементом фона является <div> со стилем position: fixed и height: 100%. Он очень хорошо работает во всех настольных браузерах, но когда я попробовал его на своем iPhone, содержимое внезапно сдвинулось вниз при прокрутке - я почти уверен, что это связано с исчезновением нижней строки меню Safari. Есть ли способ «обойти» эту панель меню Safari при отображении высоты 100%? Вот стиль моего элемента. Чтобы увидеть это в действии, вот ссылка: https://gwtcharlotte.herokuapp.com/

JS / HTML

<div className = "landing-container text-center">
    <div style = {this.styleOptions()}
        className='landing-image'>
    </div>
    <div className = {`landing-overlay ${this.state.imageLoaded}`}>
        <div>
            <h1>GUYS WITH TIES</h1>
            <p className='m-w-container m-auto'>Bringing Charlotte together and improving our community through non-profit fundraising</p>
            <a style = {{opacity: (this.state.imageLoaded ? 1 : 0)}} 
            className = {'btn btn-red btn-small landing-btn'} 
            onClick = {() => this.smoothScroll()}>DISCOVER OUR EVENTS</a>
            <div style = {{width:'100%', height: 70}}/>
        </div>
    </div>
</div>

CSS

.landing-container{
  display: block;
  width: 100%;
  position: fixed;
  height: 100%;
  min-height: 500px;
  font-size: 24px;
  z-index: 0;
}
.landing-overlay{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  color: #fff;
  background: linear-gradient(#29709c,#4e6c7b);
  display: flex;
  padding: 15px;
  flex-direction: column;
  justify-content: center;
}