question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ResizeObserver (and MutationObserver) not patched by zone.js

See original GitHub issue

Current behavior

Example with delay (my use case) - https://stackblitz.com/edit/angular-f8evbx?file=src/app/app.component.spec.ts Simplified example - https://stackblitz.com/edit/angular-f8evbx-3ak8vv?file=src/app/app.component.spec.ts MutationObserver example - https://stackblitz.com/edit/angular-f8evbx-6wdpmj?file=src/app/app.component.ts

  1. Use ResizeObserver (or MutationObserver + window.onresize to polyfill) on an element
  2. (not relevant) Handle event into an observable with debouce or some other delay thingy
  3. Write test for it using fakeAsync

Tests using fakeAsync fail, I’m forced to use setTimeout(expectations+done, delay) which causes unexpected delays. I tried using import 'zone.js/dist/zone-patch-resize-observer'; but it didn’t work.

On top of that, the timeout is flaky unless a full extra second or so is added to the delay.

Expected behavior

flush() should trigger events from ResizeObserver and MutationObserver

Other things

“zone.js”: “^0.8.26” “@angular/core”: “^6.1.0”, “rxjs”: “^6.2.0”,

Relevant: https://github.com/angular/zone.js/pull/1012

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:13
  • Comments:27 (9 by maintainers)

github_iconTop GitHub Comments

3reactions
ntvsx193commented, Feb 3, 2021

Any progress?

2reactions
dylhunncommented, Sep 29, 2022

ResizeObserver is an available polyfill. MutationObserver is already automatically patched.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Manually resizing an element doesn't fire a mutation observer ...
It is a bug in Chrome, reported here. The bug is still open, which means it has not been fixed.
Read more >
How to use ResizeObserver with Angular - DEV Community ‍ ‍
ResizeObserver is a new API which allows us to react to element ... has monkey-patched most of the events but not (yet) ResizeObserver....
Read more >
Patched zone.js without modifications to MutationObserver
n' + 'Most likely cause is that a Promise polyfill has been loaded ' + 'after Zone.js (Polyfilling Promise api is not necessary...
Read more >
ResizeObserver: it's like document.onresize for elements
ResizeObserver is no exception. You create a ResizeObserver object and pass a callback to the constructor. The callback is passed an array ...
Read more >
Exploring web APIs Observers — real life examples explained!
js so it could intercept the async operation and trigger change detection upon it, Angular patches the IntersectionObserver as well. MutationObserver. Lets us ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found