Safari on iOS scrolls beyond element when virtual keyboard is opened

Question

To try it:

Open this codepen in Safari 12 on iOS (device or simulator).
Focus the input. The virtual keyboard should open.
Now scroll all the way to the bottom of the page.
You should be able to overscroll outside of the <html> element and see a white stripe the size of the Safari menu/action bar like so:

demo

When you close the virtual keyboard, the stripe goes way...

Is this a bug with Safari? Any way to fix this?

Karthik · Accepted Answer

There is no known HTML/CSS/JS fix you can do. Try inspecting it on the safari browser by connecting your Mobile to mac Safari and debug, you can also use xcode and use mobile emulator. The HTML and BODY height is same as per the document. Apple Keyboard is adding the white space on its own which is not part of the DOM. This is valid of every website and just not affecting yours alone.

When the keyboard pops up on iOS devices, the system reserves space at the bottom of the screen for the keyboard, which can affect the layout and appearance of web pages. This behavior can lead to the perception that extra space is added at the bottom of the website. One possible reason behind this mechanism is:

Viewport Adjustment: iOS adjusts the viewport size to accommodate the keyboard. This adjustment means that the visible portion of the web page shrinks, effectively pushing content upwards to make room for the keyboard.

Safari on iOS scrolls beyond <html> element when virtual keyboard is opened

Tags:

html

css

ios

mobile-safari

safari

Alex Nault

1 Answers

Karthik

Recent Activity

Donate For Us