Angular: ChangeDetection not being triggered for asynchronous processes specifically in versions greater than or equal to Chrome 64

Question

Currently, I'm utilizing the ResizeObserver in Angular to monitor the size of an element.

 observer = new window.ResizeObserver(entries => {
     ...
     someComponent.width = width;
 });
 observer.observe(target);

Everything runs smoothly when testing the code on Safari, Firefox, or Chrome 63.

However, with the release of Chrome 64 (according to Can I Use, now with native support), the functionality suddenly stops working as intended:

It seems that Chrome 64 fails to trigger change detection for events from the ResizeObserver.

Any insights or suggestions on what might be causing this unexpected behavior?

UPDATE: Based on the discussion below, I have made some updates to my post.

Answer 1

Answer №1

Zone.js has provided a patch for ResizeObserver that works with Chrome 64 and above. The patch is not yet released, so please be patient and wait for the next version of zone.js (0.8.21). You can find more information about this patch at https://github.com/angular/zone.js/pull/1012. Also, you can check out a working sample at https://github.com/JiaLiPassion/zone-resize-observer.

Answer 2

Zone.js has provided a patch for ResizeObserver that works with Chrome 64 and above. The patch is not yet released, so please be patient and wait for the next version of zone.js (0.8.21). You can find more information about this patch at https://github.com/angular/zone.js/pull/1012. Also, you can check out a working sample at https://github.com/JiaLiPassion/zone-resize-observer.