developer/scrabble-game
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

UI: pin the SPA document so iOS/WKWebView cannot rubber-band the page
CI / changes (pull_request) Successful in 2s
Details
CI / unit (pull_request) Has been skipped
Details
CI / integration (pull_request) Has been skipped
Details
CI / ui (pull_request) Successful in 43s
Details
CI / gate (pull_request) Successful in 0s
Details
CI / deploy (pull_request) Successful in 1m1s
Details

Browse Source 
On iOS (notably the Telegram Mini App) the document elastic-overscrolls on a
vertical drag even with overscroll-behavior:none — the whole page stretches and
bounces, and it fought the board's swipe-to-open-history. Telegram's own
swipe-to-minimise is already disabled at launch; this removes the remaining
WebKit document bounce by pinning the document (position:fixed + overflow:hidden)
for the game SPA only. Every screen already fits the visual viewport (--vvh) and
scrolls its own inner areas, so the document never needed to scroll.

Scoped to the app via an `app-shell` class set in main.ts; the standalone
landing page (landing.ts) keeps its normal scrolling document. e2e locks the
contract on both entries.
This commit is contained in:
Ilia Denisov
2026-06-11 20:43:12 +02:00
parent e68fe61e39
commit 6268b9d2a2
4 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/app.css
+14
View File
@@ -140,6 +140,20 @@ body {
touch-action: manipulation;
}
/* The game SPA (main.ts adds .app-shell to <html>) pins the document so iOS/WKWebView — notably
the Telegram Mini App — cannot rubber-band ("stretch") the whole page on a vertical drag;
overscroll-behavior alone does not stop the root-document bounce there. Every screen fits the
visual viewport (--vvh) and scrolls its own inner areas, so the document never needs to
scroll. The standalone landing page (landing.ts) omits the class and scrolls normally. */
html.app-shell {
overflow: hidden;
}
html.app-shell body {
position: fixed;
inset: 0;
overflow: hidden;
}
#app {
height: 100%;
/* No text selection anywhere by default; inputs opt back in below. */
ui/src/main.ts
+5
View File
@@ -2,4 +2,9 @@ import { mount } from 'svelte';
import './app.css';
import App from './App.svelte';
// Pin the document for the game SPA (see app.css `html.app-shell`) so iOS/WKWebView — notably
// the Telegram Mini App — cannot rubber-band the whole page on a vertical drag. The standalone
// landing page (landing.ts) is a normal scrolling document and deliberately omits this class.
document.documentElement.classList.add('app-shell');
export default mount(App, { target: document.getElementById('app')! });