Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Safari Mobile app banner changes the viewport height

enter image description here

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.
like image 208
w3debugger Avatar asked Nov 14 '18 05:11

w3debugger


2 Answers

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;
}
like image 149
Neo Genesis Avatar answered Nov 11 '22 04:11

Neo Genesis


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>
like image 1
Jose Ch. Avatar answered Nov 11 '22 04:11

Jose Ch.