Browser errors with ResizeObserver

[LeonEck]

Browser errors with ResizeObserver

Reproduction

Open https://stackblitz.com/edit/resizeobserver-bug?file=index.html and focus the input. The error messages will be added to the DOM bellow the input.

Description

When an autocomplete is attached to an input which width changes frequently (like in an animation), browsers throw errors originating in ResizeObserver. Chrome and Firefox do not display these errors in the console. Only Safari shows them. You have to listen to the onerror event to surface these errors. Tools like Cypress and monitoring tools for JS errors notice these errors as an unhandled exception.

• Error message in Chrome: ResizeObserver loop limit exceeded
• Error message in Firefox and Safari: ResizeObserver loop completed with undelivered notifications.

Even though these errors are raised, the overlay is correctly positioned, sized, and works just fine.

Research about the error messages

• The error originates in the floating-ui dependency of this library. A discussion about this topic was closed: ResizeObserver loop limit exceeded floating-ui/floating-ui#1740
• There are various suggestions online that this error is harmless and can be ignored.
  • Here is an example on how to silence it in Cypress: ResizeObserver loop limit exceeded quasarframework/quasar#2233 (comment)
  • StackOverflow question regarding ignoring it in TestCafe: https://stackoverflow.com/questions/64238740/how-to-ignore-the-resizeobserver-loop-limit-exceeded-in-testcafe/64257593#64257593
  • Explanation on why this error is raised and that it can be ignored: https://stackoverflow.com/a/50387233
  • Ignoring the error in Sentry: https://stackoverflow.com/a/66260608

Research conclusion regarding error messages

There appears to be a consensus that these errors can be safely ignored. But at the same time this is very annoying since this process of ignoring it must be configured for all kinds of tools. Therefore it should still be desirable to prevent these errors from appearing.

Research into possible fixes

A suggestion mentioned when researching the error messages is to use requestAnimationFrame: https://stackoverflow.com/a/58701523

Based on the above linked answer this library updated its implementation: nolimits4web/swiper@0567641

Using requestAnimationFrame was also suggested for floating-ui but rejected: floating-ui/floating-ui#1740 (comment)

Nevertheless floating-ui has an option on autoUpdate to use animationFrame: https://floating-ui.com/docs/autoupdate#animationframe

Conclusion

I will activate animationFrame in the autoUpdate call. If this goes well and there is no negative feedback after a release, this implementation will remain in the lib. If something breaks or negative feedback is reported, I would consider either reverting (and recommending to ignore the errors) or implement an API option to toggle between the two implementations.