CODEWITHSUNDEEP
csscss-positionmobile-safari
fefrei
fefrei

Reputation: 905

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:

screenshot (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?

Upvotes: 0

Views: 8387

Answers (2)

Karthik
Karthik

Reputation: 621

Add the below styles to fix the issue

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

Here you find the reference

Upvotes: 0

viCky
viCky

Reputation: 864

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.

Upvotes: 2

Related Questions