mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-17 05:13:32 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user