fix: Safari compatibility — polyfill requestIdleCallback and IntersectionObserver
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:
@@ -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 (
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user