Bug 202120
| Summary: | CSS position: sticky does not pin element to bottom of screen when virtual keyboard is open | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | william |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | REOPENED | ||
| Severity: | Normal | CC: | 709922234, bfulgham, david, dbates, simon.fraser, webkit-bug-importer, wenson_hsieh, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 12 | ||
| Hardware: | iPhone / iPad | ||
| OS: | iOS 12 | ||
william
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
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.
william
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
william
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.