202120 2019-09-23 15:49:05 -0700 CSS position: sticky does not pin element to bottom of screen when virtual keyboard is open 2024-08-30 17:09:14 -0700 1 1 1 Unclassified WebKit CSS Safari 12 iPhone / iPad iOS 12 REOPENED InRadar P2 Normal --- 1 william webkit-unassigned 709922234 bfulgham david dbates simon.fraser webkit-bug-importer wenson_hsieh zalan oldest_to_newest 1573448 0 william 2019-09-23 15:49:05 -0700 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 1574706 1 webkit-bug-importer 2019-09-26 19:53:57 -0700 <rdar://problem/55768460> 1576148 2 simon.fraser 2019-10-02 13:36:06 -0700 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. 1576560 3 william 2019-10-03 13:07:41 -0700 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 1576581 4 william 2019-10-03 13:48:14 -0700 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.