Prevent iOS Safari from animating its address bar when touch-action none is used

user_3130281 0
Viewed 987

I have implemented custom touch behavior in my site and I'm using touch-action to prevent the browser from handling user gestures.

The problem is that Safari will collapse and expand its address bar at the bottom as the user is swiping up and down over an element with touch-action: none. The content isn't scrolled, which is the expected behavior, but the address bar changes its state, which isn't. This also resizes the screen, causes layout shifts and resize event listeners to fire, and ruins the user experience.

Chrome, like Safari, also has a UI bar at the bottom that appears and disappears when the page is scrolled up and down, but it stays still while the user swipes over a touch-action: none element. This is the correct behavior.

I've made a test page where the issue can be reproduced. Try swiping fingers over the red box in Safari and the address bar should animate in and out, even though the page isn't scrolling.

I've also made a video on my device, where I demonstrate how Chrome doesn't have that issue, but Safari does.

I filed a bug report on Apple's official feedback form for Safari. In the meantime, is there a workaround for the issue?

I tried the usual approach of adding height: 100% and overflow: hidden to html and body, in various different combinations, but nothing helped.

safari css ios
1 Answers

Try this typescript code:

let disableScroll = false;
let startY = 0;

function isScrollable(e: HTMLElement | null, up: boolean): boolean {
    if (!e) return false;

    if (up && e.scrollTop + e.clientHeight < e.scrollHeight) {
        return true;
    }

    return e.scrollTop > 0;
}

function hasScrollableBase(e: HTMLElement | null, up: boolean) {
    while (e && e !== document.body) {
        e = e.parentNode as HTMLElement | null;
        if (isScrollable(e, up)) return true;
    }
    return false;
}

function onTouchStart(e: TouchEvent) {
    startY = e.touches[0].pageY;
    disableScroll = false;
}

function onTouchMove(e: TouchEvent) {
    const el =
        e.target instanceof HTMLElement ? (e.target as HTMLElement) : null;

    if (!el) {
        e.preventDefault();
        return false;
    }

    if (disableScroll || e.touches.length > 1) {
        e.preventDefault();
        return false;
    }

    const dy = e.touches[0].pageY - startY;


    if (hasScrollableBase(el, dy < 0)) return true;

    disableScroll = true;
    e.preventDefault();
    return false;
}


window.addEventListener("touchmove", onTouchMove, {
    passive: false,
});
window.addEventListener("touchstart", onTouchStart);
user_9647110
Related