Ilia Denisov
6268b9d2a2
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 43s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m1s
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.
11 lines
501 B
TypeScript
11 lines
501 B
TypeScript
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')! });
|