Skip to content

fix: restore iOS PWA viewport after keyboard dismiss - #387

Open
Windrunner20 wants to merge 1 commit into
agegr:mainfrom
Windrunner20:fix/ios-pwa-keyboard-dismiss
Open

fix: restore iOS PWA viewport after keyboard dismiss#387
Windrunner20 wants to merge 1 commit into
agegr:mainfrom
Windrunner20:fix/ios-pwa-keyboard-dismiss

Conversation

@Windrunner20

Copy link
Copy Markdown
Contributor

Summary

Fix the large blank strip left below the composer after dismissing the software keyboard in an installed iOS PWA.

Cause

WebKit can dispatch visualViewport.resize before visualViewport.height reflects the restored full-screen height. The viewport hook read that stale value synchronously and could leave --app-viewport-height set to the keyboard-reduced height, so the whole chat layout remained shorter after the keyboard closed.

This event ordering is documented in WebKit bug 254861:
https://bugs.webkit.org/show_bug.cgi?id=254861#c4

Fix

  • defer visual viewport reads to requestAnimationFrame
  • coalesce repeated viewport/window resize and scroll events
  • re-evaluate on focusin, focusout, and pageshow
  • remove the custom height as soon as the viewport restores or the editor loses focus
  • reset WebKit's shifted page position after the viewport settles, without interfering with pinch zoom
  • cancel the pending animation frame and remove all listeners during cleanup

Validation

  • NODE_ENV=test node --test components/*.test.mjs hooks/*.test.mjs lib/*.test.mjs — 241 passed
  • ./node_modules/.bin/tsc --noEmit
  • npm run lint
  • git diff --check

A final physical-device check should reproduce by opening the composer keyboard in standalone mode and dismissing it using both the keyboard button and a tap outside the editor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant