0
233
ViewsWhy my nextjs app doesn't work on Safari?
I'm developing a web app using nextjs. Everything works just fine on every browser, except for Safari on Mac. This is what I got when I open the developer console:
Only on Mac that this is happening, it can still run normally on an iPhone. Does anyone have an idea why this is happening?
·
Juan Pablo Isaza
1 answers
Answer question0
The IntersectionObserver API is not available on Safari v3.1-12. Either you or any of your libraries is using this API. To make it work on older versions of Safari, you need to polyfill it. Something like this should do the job for Safari v6+:
// pages/_app.jsx
import Script from 'next/script';
const App = ({ Component, pageProps }) => (
<>
<Script
src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"
strategy="beforeInteractive"
/>
<Component {...pageProps} />
</>
);
export default App;
References:
- https://caniuse.com/intersectionobserver
- https://nextjs.org/docs/basic-features/supported-browsers-features#custom-polyfills
- https://github.com/w3c/IntersectionObserver/tree/main/polyfill
- https://nextjs.org/docs/basic-features/script#loading-polyfills
- https://nextjs.org/docs/advanced-features/custom-app
·
Juan Pablo Isaza
Report
Answer question