Серая полоса перекрывает пользовательский интерфейс на Chrome Mobile, когда полоса URL изменяется при прокрутке?

Question

Я внедряю нижнюю панель навигации в виде приложения в мобильной версии моего сайта. Я сталкиваюсь с проблемой, когда серая полоска перекрывает нижнюю панель навигации при прокрутке. Я думаю, что это связано с изменением размера окна, так как панель URL прокручивается из поля зрения. При скроллинге это выглядит так.

Есть идеи, как сохранить нижнюю навигацию фиксированной в нижней части окна, даже если она изменяется из-за скрытия панели URL-адресов?

Вот CSS для нижнего элемента навигации и каждой ссылки в нижнем колонтитуле:

.footer {
    -webkit-box-align: center;
    align-items: center;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: darkgrey;
    background-color: white;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    left: 0;
    position: fixed;
    right: 0;
    z-index: 2000;
}
.footerLink {
    -webkit-box-align: center;
    align-items: center;
    color: darkgrey;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    font-size: .9rem;
    line-height: 1;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    text-align: center;
    width: 4rem;
    height: 4.0rem;
    border-radius: 2px;
    text-decoration: none;
}

А вот Javascript элемента React:

const BottomNav = (props) => {
    return (
        <div className={headerStyles.footer} >
            <Link className={styleFooter('/')}
                to='/'
            >
                <Icon size='large' style={{ margin: '3px' }} name='home' />Home</Link>

            <Link
                className={styleFooter('/exclusive-dining')}
                to='/exclusive-dining'
            >
                <Icon size='large' name='food' />Packages</Link>
            <Link
                className={styleFooter('/happy-hour-finder')}
                to='/happy-hour-finder'
            >
                <Icon size='large' name='glass martini' />
                Happy Hours</Link>
            <Link
                className={styleFooter('/articles')}
                to='/articles'
            >
                <Icon size='large' name='newspaper' />Articles</Link>
            <Link
                className={styleFooter('/app/profile')}
                to='/app/profile'
            >
                <Icon size='large' name='user' />Profile</Link>
        </div >
    )
}

export default BottomNav;

Answer 1

Хорошо, я понял это. В моем глобальном CSS я понял, что переполнение было установлено скрытым для тега html, например так:

html {
  box-sizing: border-box;
  overflow: hidden;
}

Это приводило к тому, что дополнительное пространство на экране становилось пустым по мере изменения размера внутреннего окна , Удаление этого кода решило проблему.