diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index e21b499..00a3df1 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -73,23 +73,14 @@ function App() { getBookmarkedUrls().then(setBookmarkedUrls).catch(() => {}); }, []); - // On iOS, overscroll (rubber-band) reveals the html/body background. - // When the home page has a full-screen background image, force html+body - // to black so the overscroll area matches instead of flashing white. + // On iOS, rubber-band overscroll reveals the background behind the page. + // Set it to black when the home page has an active background image so overscroll + // zones show black instead of white. Cleared on teardown or when leaving home. const isHomeWithBg = !hasSearched && !!(bgInfo?.enabled && bgInfo?.url); useEffect(() => { const el = document.documentElement; - if (isHomeWithBg) { - el.style.backgroundColor = "#000"; - document.body.style.backgroundColor = "#000"; - } else { - el.style.backgroundColor = ""; - document.body.style.backgroundColor = ""; - } - return () => { - el.style.backgroundColor = ""; - document.body.style.backgroundColor = ""; - }; + el.style.backgroundColor = isHomeWithBg ? "#000" : ""; + return () => { el.style.backgroundColor = ""; }; }, [isHomeWithBg]); const doSearch = useCallback( @@ -271,11 +262,11 @@ function App() { // Home page (no search yet) if (!hasSearched) { return ( -
- {/* Background image — fixed so it covers the full viewport including iOS overscroll zones */} +
+ {/* Background image */} {bgUrl && (
diff --git a/frontend/src/index.css b/frontend/src/index.css index b7e0e12..6e43a01 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -5,8 +5,6 @@ html, body { overflow-x: hidden; overscroll-behavior-x: none; - /* Prevent iOS rubber-band scroll from revealing white behind full-screen pages */ - overscroll-behavior-y: none; } :root {