Reference error: Can't find variable: IntersectionObserver

Question

I'm trying to use IntersectionObserver in cordova 8.0.0 app which is running on ios 13. When I inspect my app via safari, I see an error on intialization:

ReferenceError: Can't find variable: IntersectionObserver

This would suggest, that IntersectionObserver is not available, and I should use a polyfill. But! I've read many post claiming that IntersectionObserver is nativly supported in iOS safari 12+. And I kinda assume, that cordova would be running nativly available WKWebView, so it should work without polyfill, right?

I've found that I've got IntersectionObserver enabled in my safari experimental features, so maybe there is an option/flag I could use to force enable this feature in my app as well? I'd really like to avoid using polyfill if it's possible..

Thx to any suggestions

Gens

Have you tried to change the deployment target version? More info here: https://mcmap.net/q/490907/-cordova-ios-how-to-change-minimum-deployment-version – Envelop

Answer 1

We ran into this issue and there is one important thing to call out. While this has been fixed in newer Safari Browsers, this issue still can occur on older devices (despite fully updated Safari). This is due to the fact that the IntersectionObserver feature seems to be deactivated as 'Experimental feature' on older iPhones (I know for fact that this is the case for iPhone 8) - possibly to save resources - see https://youtu.be/qDSXYGybNVU?t=68. So to ensure your application to work you might need to use polyfill as an alternative/fallback nevertheless.

Quacksalver

Thanks, this helped us debug this issue. We were trying to figure out how this was broken despite it being supported. – Zsolway

Answer 2

IntersectionObserver API is supported on iOS safari since 12.2. Yet it was supported via 'experimental feature' and enabled by default. I assume that experimental features are not enabled under cordova by default, so far I haven't found a way to configure it to be enabled.

An option is to use polyfill: https://www.npmjs.com/package/intersection-observer. I tested myself and performance is not good enough, it uses either setTimeout or MutationObserver to observe whole document with all options enabled.

Umlaut

Answer 3

I just added this checking

if ('IntersectionObserver' in window) {
  // IntersectionObserver initialization code
} else {
  // make lazy loading elements to be loaded right away
}

Enjoy

Dentate