Large Angular app scrolling in IE11 is not smooth if listening for scroll events

Question

I am working on large angular app and I have a couple of scroll listener to adjust positions. When user scroll in major browsers, all is good but in IE 11, the scrolling is delayed for about 2 seconds and it's not smooth.

When debugging, I isolated the problems and by removing scrolling listeners, it fixed the issue and the scrolling was smooth in IE. The problem is that even empty scroll listener is creating this unpleasant delay scrolling experience. In other angular apps I've worked with, listening for scrolling didn't cause any issue in IE.

I am looking for any suggestions or ideas what could go wrong and how to fix it.

The way we listen in the app is by HostListener('window:scroll') but I tried to change it also to directive and subscription with the method fromEvent or the window.addEventListener('scroll') but no differences.

Performance in IE11 on scroll:

Answer 1

I have faced the same issue in IE. Please use code snippet like below and also maintain pagination and limit the records <= 200 per instance.

In Html:

 *ngFor="let data of array | async;index as i; trackBy: trackByFn(index)"

In Component:

trackByFn(index) {
return index;`enter code here`

}