yiekheng
9681dddc2e
Adds a tiny client component mounted in the root layout that listens for pageshow with persisted=true (bfcache resume) and nudges scroll + forces a reflow. Resolves the zoom-desync bug where viewportFit=cover + maximumScale=1 leaves the visual viewport stale after device lock. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
21 lines
707 B
TypeScript
21 lines
707 B
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
// iOS Safari bug: with viewportFit=cover + maximumScale=1, restoring from
|
|
// bfcache after lock/unlock can leave the visual viewport in a stale
|
|
// "zoomed" state. Nudging scroll + forcing a reflow on pageshow
|
|
// (persisted) realigns it without changing the zoom level.
|
|
export function ViewportRedrawOnResume() {
|
|
useEffect(() => {
|
|
const onShow = (e: PageTransitionEvent) => {
|
|
if (!e.persisted) return;
|
|
window.scrollTo(window.scrollX, window.scrollY);
|
|
void document.body.offsetHeight;
|
|
};
|
|
window.addEventListener("pageshow", onShow);
|
|
return () => window.removeEventListener("pageshow", onShow);
|
|
}, []);
|
|
return null;
|
|
}
|