diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue index 40a90d58..868ace4d 100644 --- a/packages/app/src/App.vue +++ b/packages/app/src/App.vue @@ -40,7 +40,7 @@ function onResize() { windowWidth.value = window.innerWidth } // actually shrinks when the keyboard opens (dvh doesn't do this reliably) const rootStyle = computed(() => { if (isMobile.value && isKeyboardOpen.value) { - return { height: `${viewportHeight.value}px` } + return { height: `${viewportHeight.value}px`, overflow: 'hidden' } } return {} }) diff --git a/packages/app/src/composables/useVisualViewport.ts b/packages/app/src/composables/useVisualViewport.ts index 402913f2..a54dd06a 100644 --- a/packages/app/src/composables/useVisualViewport.ts +++ b/packages/app/src/composables/useVisualViewport.ts @@ -17,13 +17,18 @@ export function useVisualViewport() { // Store the initial full height so we can compute keyboard offset let fullHeight = typeof window !== 'undefined' ? window.innerHeight : 0 - function onViewportChange() { - const vv = window.visualViewport - if (!vv) return - const kbHeight = Math.max(0, fullHeight - vv.height) - keyboardHeight.value = kbHeight - isKeyboardOpen.value = kbHeight > 100 - viewportHeight.value = vv.height + let debounceTimer: ReturnType | null = null + + function onViewportChangeRaw() { + if (debounceTimer) clearTimeout(debounceTimer) + debounceTimer = setTimeout(() => { + const vv = window.visualViewport + if (!vv) return + const kbHeight = Math.max(0, fullHeight - vv.height) + keyboardHeight.value = kbHeight + isKeyboardOpen.value = kbHeight > 100 + viewportHeight.value = vv.height + }, 50) } function onWindowResize() { @@ -40,8 +45,8 @@ export function useVisualViewport() { if (vv) { fullHeight = vv.height viewportHeight.value = vv.height - vv.addEventListener('resize', onViewportChange) - vv.addEventListener('scroll', onViewportChange) + vv.addEventListener('resize', onViewportChangeRaw) + vv.addEventListener('scroll', onViewportChangeRaw) } window.addEventListener('resize', onWindowResize) }) @@ -49,8 +54,8 @@ export function useVisualViewport() { onUnmounted(() => { const vv = window.visualViewport if (vv) { - vv.removeEventListener('resize', onViewportChange) - vv.removeEventListener('scroll', onViewportChange) + vv.removeEventListener('resize', onViewportChangeRaw) + vv.removeEventListener('scroll', onViewportChangeRaw) } window.removeEventListener('resize', onWindowResize) })