Infinite loop causing crash with firefox & edge

[baptisterey]

I am using the carousel just fine in Chrome but when I switched to Firefox or Edge, I am getting an infinite loop in typescript resulting in the whole javascript crashing.

I belive it has to do with the Resize-Observer-Polyfill conflicting with Zone.js leading to an infinite loop of callbacks. When I execute the carousel outside the angular space, it is working just fine (but I can't use my components...).

But I saw in your exemples that you achieved to make it work both in Firefox and Edge, I looked into it but didn't manage to make it works locally.

Thanks for the help!

Edit : After some investigations, the bug only occurs on pages wich its route is a child of the main route.

[ZouYouShun]

Hi @Civetdelapin, Could you show this problem with stackblitz? Maybe is some polyfill with browser ?

[pKrupaJunior]

I run into the same issue on Firefox just now. Sadly I don't have time right now to reproduce the bug.

[wingerlion]

Hi guys, actually I'm facing with this issue on firefox too.

  <ng-template #carouselContent let-avatar let-i="index">
    <article class="item cursor-pointer"
      [ngClass]="{'visible': currentIndex===i}">
      <div class="img" (click)="click(i)"
        [style.backgroundImage]="'url('+avatar.url+')'">
        {{i}}
      </div>
    </article>
  </ng-template>

When I remove let-avatar attribute, my customized component work without any problem, but I need infinite mode and autoplay. Please let me know if you want to help me to fix this issue.

[aivaneichyk]

Actually this affects all browsers where ResizeObserver is not implemented and the polyfill is used. Which means (based on browser support) that the carousel only works in Chrome, Android browser and Samsung Internet. IE, Edge, Firefox, Safari (iOS+MacOS) crash in infinite loop. I even was not able to make it work (based on @wingerlion comment) by removing carouselContent template, setting infinite to false, and disabling autoplay. This means that this is quite a critical issue.

As @Civetdelapin mentioned, this is most likely the issue with Resize-Observer-Polyfill and Zone.js. I guess, the workaround for now would be to leave zone for resize observer and enter back to handle the event. But unfortunately, it can't be done in the application, it should be done here in the library.

Tested on Angular 8.

[chyzhvasyl]

Me too