fix: prevent white background flash and overscroll on Safari iOS

- Set background-color: #101010 on html/body/.App so the Safari iOS
  rubber-band overscroll area is dark instead of white
- Always render body background style in ViewLoader (not just during
  Suspense fallback) so keyColour param and --background-color-override
  propagate to the body for the overscroll region
- Add viewport-fit=cover, apple-mobile-web-app meta tags for proper
  iOS notch/safe-area handling
- Fix manifest.json background_color from #ffffff to #101010
- Align theme_color across both manifests to #101010

https://claude.ai/code/session_016z5vU45pexTdkQV2eHJqh4
This commit is contained in:
Claude
2026-05-09 16:35:53 +00:00
parent fe44b33da2
commit e9de1ec19f
5 changed files with 13 additions and 5 deletions
+5 -1
View File
@@ -23,15 +23,19 @@ export default function ViewLoader({ children }: PropsWithChildren) {
const searchParams = new URLSearchParams(window.location.search);
const colourFromParams = searchParams.get('keyColour') ?? '#101010';
// always keep body background in sync so Safari iOS overscroll area matches the view
const bodyBgStyle = `body { background-color: var(--background-color-override, ${colourFromParams}); }`;
return (
<Suspense
fallback={
<>
<style>{`body { background: var(--background-color-override, ${colourFromParams}); }`}</style>
<style>{bodyBgStyle}</style>
<Loader />
</>
}
>
<style>{bodyBgStyle}</style>
<OverrideStyles />
{children}
</Suspense>