Intersection Obserser freezes IE11 in angular 7 application

Question

I created an angular 7 application and used Intersection Observer to lazy load some items. It working like a breeze in Chrome, Mozilla and even Edge. But in IE11, when the lazy loading starts and intersection observer starts , the application freezes. I added import 'intersection-observer' in polyfills.ts to support IE11. I am confused with this behaviour.

  intersectionObserverForTableRow() {
    const selectedNodeLists = document.getElementsByClassName('tableDataRow');

    const tableIntersectionObserver = new IntersectionObserver((entries, tableIntersectionObserver) => {
      entries.forEach((entry) => {
        if (!this.hasNextPage) {
          this.showShimmerRows = false;
          tableIntersectionObserver.disconnect();
        }
        if (entry.isIntersecting) {
          const el = entry.target;
          // console.log(el.id, ('lazyLoadedObserver' + (this.currentTableContent.length - 1)))
          if (el.id === ('lazyLoadedObserver' + (this.currentTableContent.length - 1))) {
            // console.log('inside');
            // this.currentTableContent = this.currentTableContent.concat(this.setDummyDataForTableRowShimmer());
            this.setDummyDataForTableRowShimmer();
            this.pageNumber++;
            this.loadNextSetOfData.emit(this.pageNumber);
            // console.log(this.currentTableContent)
            // setTimeout(() => {
            //   this.triggerObserver(selectedNodeLists, tableIntersectionObserver)
            // }, 10);
            tableIntersectionObserver.unobserve(entry.target);
          }
        }
      });
    });

    this.triggerObserver(selectedNodeLists, tableIntersectionObserver);
  }

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

edit

I found out that even with setting the down below mentioned property to false IE was horribly slow while scrolling with IO polyfill active. My solution in the end was to use a debounced scroll event and handle my logic in there. I created a scroll directive that handles this now.

private setScroller(scroller: CdkScrollable) {
  this.scroller = scroller;
  this.scroller.elementScrolled().subscribe(() => {
    this.scrolled();
  });
}

@debounce() // this is a debounce decorater that only triggers if there are no events for over 300ms
private scrolled() {
  // dispatch an event to the SETTER to get the componentId
  if (this.isIE11) {
    this.callIEFunction();
  }
}

Using @HostListener for this also slowed down IE for me.

All these other answers somehow missed the point that he used the polyfill for IE because it's not supported in IE.

But if you use the official intersection observer polyfill from W3C it will freeze IE if you try to activate it.

I had the same error (and first found this question), but then I found out one little detail in the documentation:

Ignoring DOM changes
You can also choose to not check for intersections when the DOM changes by setting an observer's USE_MUTATION_OBSERVER property to false

This is not possible with the original IO (because it handles this out of the box) so it's easy to miss. But apparently the implementation from w3c also checks dom mutations.

Angular (and I guess also react and other frameworks) who change the dom frequently can then freeze IE. Other browser support IO out of the box, so the polyfill is never used there.

Long story short, this is what worked for me:

var io = new IntersectionObserver(callback);
io.USE_MUTATION_OBSERVER = false;

Documentation also mentions you can disable this globally but this didn't really work for me.

IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false; // Globally (didn't work for me)

I disabled intersection observer for ie11 only and wrote alternate logic for that. Will implement this and check. Thanks, looks like a better way. — Ram, Mar 05 '20 at 08:12
Just a heads up: I'm currently also disabling IO for IE11 because even with this flag it still runs horribly slow in IE. Couldn't get it to run performant, even with adjusting the `THROTTLE_TIMEOUT` property they provide for this polyfill. The checks for IO for IE would need to be debounced and not throttled (in my case) — cloned, Mar 05 '20 at 09:45
Had the same problem with Safari in old iOS devices (or when Intersection Observer is manually disabled in Safari experimental features). `USE_MUTATION_OBSERVER = false` did the trick. Before changing this, my page wouldn't load at all, and no error was thrown... so I suppose something tricky went on there. — ktsangop, Sep 13 '22 at 11:49
Coming back to my previous comment, to add that I have downloaded and edited directly the `intersection-observer.js` file to change the line `IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false;` Adding the above on my application (Angular) init function did not seem to work. — ktsangop, Sep 19 '22 at 11:54
Thanks for your feedback. using IO polyfill and angular (and I think also react, vue, ... ) is not an easy task. Hopefully in a not so distant feature we can do without the IO polyfill. I had to create a custom scroll listener in the end because the polyfill was too slow for my usecase. — cloned, Sep 19 '22 at 12:38

Adnan Aslam · Answer 2 · 2019-09-24T20:04:50.367

0

Check the file polyfill.ts uncomment all the code for IE.

Try to do like this

you can install this via npm npm install intersection-observer and

import into polyfills.ts as import 'intersection-observer';

It will work

edited Sep 24 '19 at 20:04

answered Sep 24 '19 at 19:57

Adnan Aslam

96
5

In pollyfills.ts, there is just 'classlist.js' commented and zone.js, which is already uncommented. – Ram Sep 24 '19 at 19:59
Try the above solution – Adnan Aslam Sep 24 '19 at 20:05
1

I already did that, so it will work on IE, but freezes on scroll thats when intersection observer starts working. – Ram Sep 25 '19 at 05:57

score 0 · Answer 3 · answered Sep 25 '19 at 01:56

0

The Intersection Observer is not supporting the IE browser, if you want to use it in IE browser, we need to add polyfill for it.

Try to install the the polyfill via npm:

npm install intersection-observer

Then, add the IntersectionObserver polyfill to your site using the following script:

<!-- Load the polyfill first. -->
<script src="path/to/intersection-observer.js"></script>

<!-- Load all other JavaScript. -->
<script src="app.js"></script>

Add, you could also add the following reference in the index.Html page:

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

More detail information, please check this link.

Besides, you could also refer to this article to install the intersection-observer-polyfill

answered Sep 25 '19 at 01:56

Zhi Lv

18,845
1
19
30

When i added intersection-observer-polyfill to polyfill.ts, IE throws syntax error on polyfills.js and main.js, if i remove that and add intersection-observer to polyfill.ts, ie loads, but freezes on call of intersection observer i.e while scrolling that is when rows are lazy loaded. – Ram Sep 25 '19 at 09:16
When freezes, have you ever try to use F12 developer Network tools to check the request, whether it is successful? Is there any error when you debug it using F12 developer tools? – Zhi Lv Sep 25 '19 at 09:26
Yeah i try to open developer Tools, it shows no error, but the internet explorer then freezes and becomes NOT-RESPONDING. – Ram Sep 25 '19 at 12:09

Intersection Obserser freezes IE11 in angular 7 application

3 Answers3

edit