Polyfill-service: IntersectionObserver is not defined using polyfill.io

[dhruvg]

Bug report

What

The IntersectionObserver polyfill is working great most of the time. But I get the occasional error:

IntersectionObserver is not defined

This error is happening on Mobile Safari 12.0 and Chrome Mobile 38 (according to Sentry). But the funny thing is that it works fine on these browsers most of the time. It is just the one or two unlucky users who experience issues.

I am loading the polyfill with the following before I load all my custom JS:

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Any ideas on what could be the cause? Running theory is that the polyfill service is failing from time to time.

Details

Expected Behavior

This error should not happen on Mobile Safari 12.0 and Chrome Mobile 38 since these browsers are supported by the polyfill.

Additional information

Related: https://github.com/w3c/IntersectionObserver/issues/352

[JakeChampion]

Hi @dhruvg, thanks for the issue. The polyfill should definitely always apply to those browsers, if the issue has only recently happened, it is likely the same bug as -- https://github.com/Financial-Times/polyfill-service/issues/1922#issuecomment-474421733 -- which has now been fixed.

As an aside, I'd recommend added crossorigin="anonymous" to the script tag, as that will help diagnose any errors from polyfills that may occur in the future :-)

[balbaal]

hi, i got same issue (IntersectionObserver is not defined), i'm using polyfill v3

'IntersectionObserver' is undefined
Unhandled promise rejection ReferenceError: 'IntersectionObserver' is undefined

[JakeChampion]

Hi @balbaal, can you please post the full polyfill.io url you are using and the useragent that you are seeing the error with please?

[gaeldestrem]

We are also experiencing an issue with this polyfill. The issue seems to appear mostly on Safari 11 / 12.0.3 and Safari mobile.

Here's the polyfill URL that we use: https://polyfill.io/v3/polyfill.min.js?flags=gated&features=Intl%2CIntersectionObserver%2CIntersectionObserverEntry

Here's the user agents where the issue appears (according Sentry)

Safari 12.03: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15

Safari 11: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.1 Safari/605.1.15

Safari Mobile: Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

[Stovetopdropp]

I'm also seeing this issue in Safari 12.0.3, using v3.
This is the full URL I am using
https://cdn.polyfill.io/v3/polyfill.min.js?features=default-3.6,Array.prototype.find,Array.prototype.flatMap,Array.prototype.includes,Object.values,Object.entries,IntersectionObserver

When pasting this URL into an older version of safari (11.1) via browserstack, I see that Intersection Observer is correctly polyfilled.

[amannn]

Experienced the same with Polyfill.io v2 yesterday.

Safari 11.0.1
Mac OS X 10.13.1

ReferenceError: Can't find variable: IntersectionObserver

Can we reopen this @JakeChampion?

[JakeChampion]

@amannn v2 does not receive updates, the fix is in v3

[jak-kal]

I was able to reproduce this around a week ago _(Safari 12.0.3 for Mac OS)_. Tried again today and I can't.

I'm not sure if that's a good or bad thing though.

_Has anybody else been able to reproduce this since?_

URL:
https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver%2CIntersectionObserverEntry

User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15

[woahitsraj]

I am also experiencing this issue in v3 as well. Specifically on iOS 12.3 on iPad in Chrome but not in Safari. I think this issue should be reopened.

URL:
https://cdn.polyfill.io/v3/polyfill.min.js?callback=bootShop&features=es6,Array.from,Array.prototype.fill,Object.values,Object.entries,Array.prototype.find,Array.prototype.findIndex,Array.prototype.includes,Array.prototype.keys,String.prototype.endsWith,String.prototype.startsWith,Object.keys,URL,IntersectionObserver,Intl.~locale.en&flags=gated

Here is the site I was testing: https://template-trend.dev.jetshop.se

[foray1010]

@JakeChampion I tested on iOS 12.1.3 with Chrome 76 using v3, the problem still exists

the link I tested
https://polyfill.io/v3/polyfill.js?flags=gated&features=default%2Ces2015%2Ces2016%2Ces2017%2Cfetch%2CIntersectionObserver%2CIntersectionObserverEntry

the user agent I used
Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/76.0.3809.81 Mobile/15E148 Safari/605.1

[TxHawks]

also getting something similar.

The script src is: https://cdn.polyfill.io/v3/polyfill.min.js?features=default,Object.entries,Array.prototype.entries,fetch,IntersectionObserver,Array.prototype.find,Array.prototype.findIndex,Array.prototype.includes,Function.name,Array.prototype.@@iterator&flags=gated&unknown=polyfill

and navigator.userAgent is: "Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Mobile/15E148 Safari/604.1"

[hakimio]

This issue is specific to Chrome on latest version of iOS. It works fine with Safari now.

[TxHawks]

@hakimio We are sometimes able to reproduce this on iOs Safari as well

[guli-bn]

We are seeing this error frequently too with version 3 on Safari 12.1 according to Sentry, last time today.

[Jayphen]

We're seeing this consistently happen with WebView user agents
Mobile Safari UI/WKWebView 12.1.4

It appears to happen on any version before 12.2

[JakeChampion]

Hi all,

The current version of polyfill-library is configured to serve IntersectionObserver to 12.0 and below. We've just released a new version which is configured to serve IntersectionObserver to 12.1 and below instead. This is not yet live on polyfill.io, I will close this issue once it is live 👍

[TxHawks]

Just out of curiosity - how would that help? Isn't 12.1 already below 12.0?

[jak-kal]

Just out of curiosity - how would that help? Isn't 12.1 already below 12.0?

Not sure what you mean but since Safari started supporting IntersectionObserver natively in 12.1+, polyfill.io has not been serving a polyfill for any version of Safari 12.0+

[TxHawks]

Sorry, my bad. I misread

[osartun]

Just adding our experiences to this thread as well: We're also polyfilling IntersectionObserver with polyfill.io v3 and the error that it wasn't found / is undefined / etc. is one of the most frequent errors on our website.

It happens on iOS ~92% of all cases – although this number might also be related to the traffic that we're getting on our website:

Top browsers according to Sentry (by name) are:

• (40.27%) Mobile Safari UI/WKWebView
• (36.40%) Mobile Safari
• (11.17%) Chrome Mobile iOS
• ( 5.62%) Opera Mobile
• ( 1.68%) UC Browser

@JakeChampion Looking forward to the changes going live. However, as the browser list shows it's not just a Mobile Safari 12.1 issue even though that seems to be the biggest chunk of it. Either way a new version of polyfill-library going live sounds good!

[JakeChampion]

I have deployed the change, you can see now that ios Safari 12.1 is being served IntersectionObserver.

https://polyfill.io/v3/polyfill.js?features=IntersectionObserver&ua=ios_saf/12.1.0

This may take some time to propagate through our CDN but it is fixed :)