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?

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?

• javascript
• ios
• safari
• next.js

Share Improve this question Follow asked Sep 23, 2021 at 5:30 William.DWilliam.D 12511 silver badge1010 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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./intersectionobserver
• https://nextjs/docs/basic-features/supported-browsers-features#custom-polyfills
• https://github./w3c/IntersectionObserver/tree/main/polyfill
• https://nextjs/docs/basic-features/script#loading-polyfills
• https://nextjs/docs/advanced-features/custom-app