position: sticky doesn't work when virtual keyboard is open in Safari

user_3038754 0
Viewed 1954

Position sticky doesn't work when virtual keyboard is open in Safari

I've tried using position: -webkit-sticky.

Expected behavior in non-Safari webkit browsers (Chrome, Firefox, Opera)

.sticky {
  background-color: red;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

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

safari css
2 Answers
let pendingUpdate = false;
const viewportHandler = (event) => {
    if (pendingUpdate) {
        return;
    }
    pendingUpdate = true;

    requestAnimationFrame(() => {
        pendingUpdate = false;
        const layoutViewport = document.querySelector('.sticky');
        layoutViewport.style.transform = "none";
        if (layoutViewport.getBoundingClientRect().top < 0) {
            layoutViewport.style.transform = `translate(0, ${-layoutViewport.getBoundingClientRect().top}px)`;
        }
    });
};
window.visualViewport.addEventListener("scroll", viewportHandler);
window.visualViewport.addEventListener("resize", viewportHandler);

The pendingUpdate flag serves to prevent multiple invocations of the transfrom that can occur when onresize and onscroll fire at the same time. Using requestAnimationFrame() ensures that the transform occurs before the next render.

user_141412190

This is expected behavior in Safari as of October 2019:

https://bugs.webkit.org/show_bug.cgi?id=202120

A workaround to make it consistent with other rendering engines would be to use the Visual Viewport API to get the visual viewport height and fix the element to the bottom using position: absolute. However, the Visual Viewport API only has support in Safari 13.

user_30387540
Related