fix: Safari compatibility — polyfill requestIdleCallback and IntersectionObserver
All checks were successful
CI / CD / test-build (push) Successful in 11m8s
CI / CD / deploy-dev (push) Successful in 1m18s
CI / CD / deploy-production (push) Has been skipped

requestIdleCallback is unavailable in Safari < 16.4, causing GatedProviders
to crash during hydration and blank the entire page. Added setTimeout fallback.
Also added IntersectionObserver fallback in ScrollFadeIn for safety.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
2026-03-05 19:25:38 +01:00
parent 4a8cb5867f
commit 69ae53809b
2 changed files with 15 additions and 2 deletions

View File

@@ -56,8 +56,15 @@ function GatedProviders({
const [deferredReady, setDeferredReady] = useState(false);
useEffect(() => {
if (!mounted) return;
const id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 });
return () => cancelIdleCallback(id);
// Safari < 16.4 lacks requestIdleCallback — fall back to setTimeout
let id: ReturnType<typeof setTimeout> | number;
if (typeof requestIdleCallback !== "undefined") {
id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 });
return () => cancelIdleCallback(id as number);
} else {
id = setTimeout(() => setDeferredReady(true), 1);
return () => clearTimeout(id);
}
}, [mounted]);
return (

View File

@@ -24,6 +24,12 @@ export default function ScrollFadeIn({ children, className = "", delay = 0 }: Sc
const el = ref.current;
if (!el) return;
// Fallback for browsers without IntersectionObserver
if (typeof IntersectionObserver === "undefined") {
setIsVisible(true);
return;
}
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {