When switching to landscape mode in iOS Safari the vertical size of the address bar (and also the tabs bar, if multiple tabs are open) is added to the viewport, although I set the height of my layout container to window.innerHeight. The layout container itself is scrollable, so I don't want any scrolling behaviour outside that container. I tried almost everything to prevent that gap:
- Setting the height of my layout container to the value of
window.innerHeight - Setting
htmlandbodyto the value ofwindow.innerHeight - Setting
htmlandbodytoheight: 100%
But the scrolling behaviour persists - here are some screenshots showing the issue:
After initial loading or switching to landscape modus it looks like this (notice the scroll bar on the right side, although the layout container (and body and html is as high as the screenshot shows):
After scrolling the outer scrollbar to the bottom:
Is this a bug of Safari in landscape mode or am I missing something obvious?
I am using an iPhone XS as a test device. It seems that Safari, regardless of my CSS properties, automatically inserts this scrollbar or the space below my container as long as the address bar and tabs bar are visible.
In all other mobile browsers (Chrome, Firefox, Edge, Opera, Brave) it works without problems, the container is as high as the viewport (i.e. 100%) and there is no scrolling outside the layout container.
Has anyone else noticed this behavior before - and if so, can something be done about it?