ResizeObserver loop completed with undelivered notifications

[daniel-sc]

Reproduction

I am not able to provide a reproduction - it seems this is only happening with some "load". But I was able to patch this library locally to fix this problem - I'll provide a PR immediately!

This error can be observed in Firefox by

  window.addEventListener('error', function (e) {
    console.error('Error occurred: ', e, e.composedPath());
  });

Expected Behavior

This error should not happen under regular circumsstances - see https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors

Actual Behavior

Error:

ResizeObserver loop completed with undelivered notifications.

Environment

• Angular: 18.1.1
• ngx-scrollbar: 15.1.3
• Browser(s): Firefox (+ probably Safari)
• Operating System (e.g. Windows, macOS, Ubuntu): Win10

[daniel-sc]

@MurhafSousli I checked out 16.0.0-beta.0, but was still able to reproduce this bug.

[daniel-sc]

@MurhafSousli after debugging a little the beta version, I think the issue lies in getThrottledStream (https://github.com/MurhafSousli/ngx-scrollbar/blob/1a969c5d42dfabfc639316875b09df2488ce4f21/projects/ngx-scrollbar/src/lib/utils/common.ts#L20). This does not delay the first event. So the first event is processed synchronously (independent of sensorThrottleTime!) and subsequently updateDimensions/TrackXDirective.update possibly change relevant dom/layout.

Additionally I found another suspicious code fragment: ngx-scrollbar/cdk/src/cdk-virtual-scroll.ts:51 - there is no throtteling at all - I'm not 100% sure if there are situations where the updated styles have effects on the observed size, but a requestAnimationFrame there might not hurt..

(Hope my comments help and do not create further confusion ;) )

[MurhafSousli]

@daniel-sc Ignore the throttle function, there is no throttling by default unless you set a duration. As I mentioned before, the update won't trigger another resize event.

Also the observer in cdk-virtual-scroll.ts doesn't trigger it either. it only updates the spacer element to match the content size.

Were you able to reproduce the error? And with what are you testing it? standard scrollbar or a virtual scroll?

[daniel-sc]

@MurhafSousli Yes, I am able to consistently reproduce the error with Firefox in our app - I'll try to note the relevant setup, as a shareable reproduction is not as simple:

• options: provideScrollbarOptions({appearance: 'compact', visibility: 'hover', sensorThrottleTime: 1000})
• happens with and without cdkScrollable on <ng-scrollbar>
• the error goes away when changing the getThrottledStream as follows:

function getThrottledStream(stream, duration) {
    return duration ? stream.pipe(
+     debounceTime(0), 
      throttleTime(duration, null, {
        leading: true,
        trailing: true
      })
    ) : stream;
}

[MurhafSousli]

I am really interested in a reproduction, I want to learn with what kind of content this error is happening and maybe it opens my eyes about a possible bug. that should be possible with a stackblitz.

[daniel-sc]

I tried to create a reproduction before (and failed) - if it would be possible to have a short call tomorrow, I can show this to you - maybe thats faster? If this would work for you, just send an appointment to daniel.schreiber [at] ti8m.ch

[daniel-sc]

@MurhafSousli Ok, I finally managed to create a reproduction: https://github.com/daniel-sc/ngx-scrollbar-reproduce-resize-observer-loop-error

If you have any questions or cannot reproduce it, please let me know!

[MurhafSousli]

Should be fixed in v16 beta2, try it out and let me know if it fixes the issue.

[daniel-sc]

@MurhafSousli it looks like it is fixed with beta2! Thanks very much for your responsiveness!!