Исправлена ​​ошибка, из-за которой элемент flexbox перемещался в iPhone Safari для мобильных устройств из-за исчезновения меню на свитке.

Question

Это очень нишевая проблема, но я создаю приложение 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;
}

Answer 1

Чтобы увеличить размер элемента до 100% в мобильном Safari, не принимая во внимание строку меню, используйте модуль CSS vh.В вашем случае вы захотите использовать height: 100vh на .landing-container.

Окно просмотра Mobile Safari всегда рассчитывается так, как если бы строки меню не отображали , поэтому кажется, что этоизмерение, которое вы ищете.