floating-ui: ResizeObserver loop limit exceeded

Update (July 4, 2023)

You could disable the elementResize option and update manually when content changes.

Unfortunately I can’t do this. I’m not changing the content, it’s just due to the repositioning of the same tooltip itself

I’ve never seen that error when it’s near the edge of the viewport. Does it happen in incognito mode? Seems like extensions could interfere based on the SO thread?

I did my best to replicate the issue in codesandbox: https://codesandbox.io/s/elated-sunset-1ugji2?file=/src/App.tsx

See the video with the steps:

https://user-images.githubusercontent.com/9648559/172205861-d11354db-01dd-48f3-af33-28e804b38f09.mov

FYI: I had to add this to correctly track the “loop limit exceeded”:

  useEffect(() => {
    window.onerror = console.error;
  }, []);

_Originally posted by @csantos1113 in https://github.com/floating-ui/floating-ui/issues/1739#issuecomment-1147656061_

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 24

Most upvoted comments

Update:

For anyone having these issues, all you need to do is set width: max-content CSS on the floating element.

I am adding a section in the docs that explains why this is necessary, and another alternative solution too.

atomiks on Oct 21, 2022

First, make sure you’re on at least @floating-ui/dom v1.4.3 or later. A fix was added that prevented the error when using size in that version.
Then, make sure the floating element has width: max-content (or a fixed width) to prevent it from resizing at the boundary edge if it’s being positioned using layout (top/left) rather than transform CSS. This is the most common cause of the error and usually fixes it. You can alternatively use the transform positioning technique instead, which should also fix it without setting a width.
If you’re still getting the error, you can just ignore it because it’s harmless. If it’s generating a modal overlay dialog and blocks your work, find ways to suppress the dialog or error (via window.onerror).
As a last resort, in case everything else has failed for some reason, set the elementResize: false option in autoUpdate. This will 100% remove any causes of the error, but if the floating element or reference element resize, it no longer updates automatically. You can however update the position manually instead in this case. Ignoring the error in Sentry or other error reporting providers might be easier though, since you don’t need to deal with update edge cases.

atomiks on Jul 4, 2023

Update (July 4, 2023)

To avoid the error, try these steps first:

Make sure you have width: max-content (or a fixed width) set on your floating element.
Make sure you have the package @floating-ui/dom@1.4.3 (or later) installed.

If those steps don’t work for some reason, see this comment for additional workarounds.

atomiks on Jul 4, 2023

I’m glad it fixed it - yes flip + size can have quirks if not set up right so it seems it can solve that as well.

atomiks on May 18, 2023

Re-opening as there should be a way to ignore the error for the size.apply case without the rAF wrapper (which causes subtle bugs). It likely can be achieved by adding a flag on the node in size, and checking within the ResizeObserver callback if the flag is present (and skipping the update call).

atomiks on May 18, 2023

the OP already proposed that but it makes the update run after paint, resulting in a brief flicker, so it’s not really viable as a solution

atomiks on Jun 15, 2022