Angular: Async process not triggering changeDetection only in >= Chrome 64

Question

I'm monitoring the size of an element in angular using ResizeObserver

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

stackblitz

When you run the code in safary, firefox or chrome 63 it works just fine

So, in chrome 64 (can-i-use -> native support) it doesn't work any more and it looks like this:

Somehow chrome doesn't do changeDetection for triggers from ResizeObserver

Any suggestion what might be the reason for this strange behaviour?

UPDATE: I'v updated my post based on the discussion below

Seems to be working for me in Chrome? `w` changes value and the yellow box changes size. What else should be expected to happen? — Arg0n, Feb 02 '18 at 09:37
In my case the value changes once in a while (probably when angular does changeDetection), but it should change constantly — Jeanluca Scaljeri, Feb 02 '18 at 09:39
It does change constantly for me. Which browser are you using? — Arg0n, Feb 02 '18 at 09:40
You're right. It does work in safari and Firefox, but in Chrome it does not. I tested chrome 64 and 66 — Jeanluca Scaljeri, Feb 02 '18 at 09:42
Yes you are right. On version 64 it does not update correctly. That's not good. — Arg0n, Feb 02 '18 at 09:53
That explains why I have seen my code working some time ago :) Most likely, I guess, this has something todo with ZoneJs, right? — Jeanluca Scaljeri, Feb 02 '18 at 11:45
I've updated the question a bit based on our findings, thanks for the help! — Jeanluca Scaljeri, Feb 02 '18 at 12:09
Have you tried manually triggering change detection in that callback? — Lansana Camara, Feb 02 '18 at 19:50
I just updated the stackblitz, and yes if I do that it works. I could move the manual changeDetection into the ResizeObserver callback function, but because I'm using @Decorators I don't prefer this solution — Jeanluca Scaljeri, Feb 02 '18 at 21:19
I figured it out. Before chrome 64 the ResizeObserver polyfill is used, but with the new Chrome, it uses the native implementation. I guess Zone.js should handle this, but because this is so new, Zone.js not yet supports this — Jeanluca Scaljeri, Feb 03 '18 at 09:12

score 1 · Accepted Answer · answered Mar 15 '18 at 06:29

1

zone.js provide a patch for ResizeObserver >= chrome 64, it is not released, please wait for next version of zone.js (0.8.21) https://github.com/angular/zone.js/pull/1012 here is a working sample.

https://github.com/JiaLiPassion/zone-resize-observer

answered Mar 15 '18 at 06:29

jiali passion

1,691
1
14
19

Angular: Async process not triggering changeDetection only in >= Chrome 64

1 Answers1