Safari Mobile app banner changes the viewport height

Question

The banner below the address bar is changing the height and not even a part of DOM.

Position: fixed elements on the bottom are hidden.

You can view this by

1. Open https://www.ounass.ae/clothing/ in Safari - iOS smart phones
2. Scroll down to view this App Banner
3. Click on Filter By button.

Haemachrome

Have you found a solution for this? I know that this is related with the Universal Links but haven't found a way to disable the bar or to dismiss it. – Magically

@TitoNobre unfortunately nope – Haemachrome

Answer 1

I have the same issue but this may not be the fix but a work-around.

const updatePositionOfCtaButton = () => {
  if (
    window.navigator.userAgent.toLowerCase().includes('safari') &&
    window.navigator.userAgent.toLowerCase().includes('mobile') &&
    document.documentElement.clientHeight > window.innerHeight &&
    !document.hidden
  ) {
    document.querySelector('.callToActionButton').style.bottom = '44px';
  } else {
    document.querySelector('.callToActionButton').removeAttribute('style');
  }
}
window.addEventListener('scroll', updatePositionOfCtaButton);
document.addEventListener('visibilitychange', updatePositionOfCtaButton);

We can also add transition to the CTA button to add a little animation

.callToActionButton {
  transition: bottom 0.16s linear 0s;
}

Whiteman

Answer 2

Have you tried -webkit-fill-available

html {
  height: -webkit-fill-available;
}

body {
  display: flex; 
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

main {
  flex: 1;
}

<header>HEADER GOES HERE</header>
<main>MAIN GOES HERE</main>
<footer>FOOTER GOES HERE</footer>

Wispy

Answer 3

Maybe the new dvh css unit can help here.

For more info checkout https://web.dev/viewport-units/

Janijania