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
Safari - iOS smart phones
Filter By
button.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;
}
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With