You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
1.0 KiB
JavaScript
27 lines
1.0 KiB
JavaScript
// iOS PWA: keep app-container sized and positioned to match the visual viewport.
|
|
//
|
|
// When the iOS software keyboard appears, iOS scrolls the layout viewport to reveal
|
|
// the focused input. This makes position:fixed elements scroll too (iOS bug).
|
|
// Fix: track visualViewport.offsetTop and move the container to compensate.
|
|
function setScreenHeight() {
|
|
if (window.innerWidth >= 1024) return;
|
|
const el = document.querySelector('.app-container');
|
|
if (!el) return;
|
|
if (window.visualViewport) {
|
|
el.style.height = window.visualViewport.height + 'px';
|
|
el.style.top = window.visualViewport.offsetTop + 'px';
|
|
} else {
|
|
el.style.height = window.innerHeight + 'px';
|
|
}
|
|
}
|
|
|
|
setScreenHeight();
|
|
window.addEventListener('orientationchange', () => setTimeout(setScreenHeight, 200));
|
|
|
|
if (window.visualViewport) {
|
|
window.visualViewport.addEventListener('resize', setScreenHeight);
|
|
window.visualViewport.addEventListener('scroll', setScreenHeight);
|
|
} else {
|
|
window.addEventListener('resize', setScreenHeight);
|
|
}
|