home/hey-search
2
0
Fork 0
mirror of https://github.com/wahyd4/hey-search.git synced 2026-08-08 21:05:14 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: correct iOS overscroll — revert fixed bg, only set html bg-color

Browse Source 
- Reverted fixed/bg-black approach (fixed + z-index:-10 made bg invisible)
- Background image stays absolute inset-0 as before (works correctly)
- Only the <html> element background-color is set to #000 via useEffect
  when the home page has an active background image; this fills the iOS
  rubber-band overscroll zones without affecting the visible content
- Reverted global overscroll-behavior-y:none (too aggressive)
- min-h-dvh kept for correct iOS dynamic viewport sizing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
junv
2026-02-23 19:43:41 +11:00
co-authored by Copilot
parent 871791bba9
commit 54d2610018
2 changed files with 8 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+8 -17
View File
@@ -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 <html> 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 (
<div className={cn("relative flex min-h-dvh flex-col", bgUrl && "bg-black")}>
{/* Background image — fixed so it covers the full viewport including iOS overscroll zones */}
<div className="relative flex min-h-dvh flex-col">
{/* Background image */}
{bgUrl && (
<div
className="fixed inset-0 -z-10 bg-cover bg-center transition-opacity duration-700"
className="absolute inset-0 -z-10 bg-cover bg-center transition-opacity duration-700"
style={{ backgroundImage: `url(${bgUrl})` }}
>
<div className="absolute inset-0 bg-black/40 dark:bg-black/60" />
frontend/src/index.css
-2
View File
@@ -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 {