Bug 202120 – CSS position: sticky does not pin element to bottom of screen when virtual keyboard is open

• Status: REOPENED
• Component: CSS

CSS position: sticky/-webkit-sticky does not pin element to bottom of screen when virtual keyboard is open.


Steps to reproduce:
1. Open https://codepen.io/wmsmacdonald/pen/vYBVVRL in Safari on iOS
2. Scroll to bring white screen into viewport
3. Click text input to focus


Expected:
Red footer should stick to bottom of screen even when virtual keyboard is open
Actual:
User must scroll down with keyboard open in order to see the red footer

[Radar WebKit Bug Importer]

<rdar://problem/55768460>

[Simon Fraser (smfr)]

Sticky position elements use the layout viewport (not the visual viewport) for positioning, and when the keyboard is up, the layout viewport extends below the keyboard. So this behavior is expected. position:fixed elements have the same behavior.

I confirmed that position: sticky uses the visual viewport for non-Safari Webkit browsers:
Chrome
Firefox
Opera
Samsung Internet


Based on this, I would expect the onus to fall on the Safari team to show that they have the correct interpretation of the the CSS spec.

I wasn't able to find to find anything specific regarding layout vs visual viewport in the spec: https://www.w3.org/TR/css-position-3/#sticky-pos

But maybe you have reference that is guiding your interpretation.


I made a StackOverflow question to give this some visibility:
https://stackoverflow.com/questions/58226087/position-sticky-doesnt-work-when-virtual-keyboard-is-open-in-safari/58226155#58226155

By the way, thank you for supporting this software.

One more thing: is there a workaround for fixing an element to the visual viewport that has good Safari support?

The Visual Viewport API gives you enough information to calculate this https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
but it only is supported by Safari 13.