In Safari on iOS 26 beta, when the page is scrolled down and the address bar shrinks at the bottom, the viewport appears to get displaced vertically which in turn shifts the position of elements with position “fixed” or “sticky.”
Note the relevant div serving as a fixed footer, with inline styles as follows:
style={{
position: "fixed",
bottom: 0,
}}
Navigate to the code sandbox url on iPhone with iOS 26 beta to reproduce the issue:
Scroll down the page. Notice that the fixed footer is no longer aligned to the bottom of the screen. Rather, there is a gap between the bottom of the viewport and the bottom of the fixed footer as shown in the screenshot. (The text is obstructed in the screenshot; it reads “This should be fixed at the bottom of the screen when I scroll down.”)
Any suggestions for how to address this? So far I’ve tried the following:
-
Various combinations of different css attributes on the
document
andbody
elements (position
,top
,overflow
,overscroll-behavior
) -
Adding
bottom: -100vh; padding-bottom: calc(100vh + env(safe-area-inset-bottom, 0))
to the footer (this worked fine in other browsers, but not in Safari 26 beta) -
Setting the following css:
html { overflow: hidden; } body { overflow: auto; }
- This prevented the issue (footer element shifting on scroll), but it had some undesired side effects. Scroll position no longer gets maintained when navigating back to the page, and programmatic scroll using
window.scrollTo
stops working. Also, the address bar no longer shrinks at the bottom of the screen when the user scrolls down.
- This prevented the issue (footer element shifting on scroll), but it had some undesired side effects. Scroll position no longer gets maintained when navigating back to the page, and programmatic scroll using