Keep element fixed while Safari navigation bar collapes on iOS

问题

I'm developing a web site based on the Hyde theme for Jekyll.

This layout uses a fixed navigation bar on the left with 100% width. This is working fine in most situations.

In Safari on iOS, however, the height of the viewport changes while the user is scrolling as the browsers top navigation bar collapses. If this happens, the navigation bar's size is not updated until the scroll stops, leaving an area in the lower left corner that is not covered by the navigation bar:

(Notice the text extends below the navigation bar. This screenshot was taken while the page was in motion.)

This video shows the problem in action.

Is there any way to force Safari to update the navigation bar's height while the scroll is in progress?

回答1:

its an ongoing discussion. There is no real solution for this problem. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

What you can try for your website is the following:

.sidebar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 18rem;
    text-align: left;
    height: 100vh;
}

This will align the sidebar to the bottom and the text wont cut. The white bar will appear on top but it wont be too intrusive as the bottom being cut out.

回答2:

Add the below styles to fix the issue

html,body{
    -webkit-overflow-scrolling: touch;
}

Here you find the reference

来源：https://stackoverflow.com/questions/44922492/keep-element-fixed-while-safari-navigation-bar-collapes-on-ios