Safari triggered "ResizeObserver loop completed with undelivered notifications" on auto update

Use Version Use version when bugs appear:

Headless UI: v1.7.18
Headless UI Float: v0.14.0
Framework: [react v18.3.1]
Browser [e.g. safari 17.4.1]

Describe the bug I receive the following error

Uncaught runtime errors:

ERROR
ResizeObserver loop completed with undelivered notifications.
handleError@http://localhost:3000/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-89c933.ed3b2397a9e1820edd41.js:4060:67
@http://localhost:3000/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-89c933.ed3b2397a9e1820edd41.js:4079:18

ERROR
ResizeObserver loop completed with undelivered notifications.
handleError@http://localhost:3000/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-89c933.ed3b2397a9e1820edd41.js:4060:67
@http://localhost:3000/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-89c933.ed3b2397a9e1820edd41.js:4079:18

To Reproduce

I used this custom component to create a clean tooltip

import { Placement } from '@floating-ui/react';
import { Popover, Transition } from '@headlessui/react';
import { Float } from '@headlessui-float/react';
import React, { Fragment, ReactNode, useRef } from 'react';

interface Props {
  children?: ReactNode;
  menuPlacement?: Placement;
  content: ReactNode;
  buttonAs?: 'div' | 'button';
  buttonClassName?: string;
  offset?: number; // the offset of the menu
  arrow?: boolean;
}

const timeoutDuration = 120;

export default function Tooltip({
  children,
  content,
  menuPlacement,
  buttonAs,
  buttonClassName,
  offset = 10,
  arrow = true,
}: Props): JSX.Element {
  const triggerRef = useRef<HTMLButtonElement>();
  const timeOutRef = useRef<NodeJS.Timeout>();

  const handleEnter = (isOpen: boolean) => {
    clearTimeout(timeOutRef.current);
    !isOpen && triggerRef.current?.click();
  };

  const handleLeave = (isOpen: boolean) => {
    timeOutRef.current = setTimeout(() => {
      isOpen && triggerRef.current?.click();
    }, timeoutDuration);
  };

  return (
    <Popover className='relative'>
      {({ open }) => (
        <Float
          middleware={({ referenceEl }) => {
            triggerRef.current = referenceEl.current as HTMLButtonElement;
            return [];
          }}
          autoUpdate={true}
          arrow={arrow}
          composable={true}
          portal={true}
          autoPlacement={menuPlacement === undefined}
          placement={menuPlacement}
          offset={offset}
        >
          <Float.Reference>
            <Popover.Button
              onMouseEnter={() => handleEnter(open)}
              onMouseLeave={() => handleLeave(open)}
              className={buttonClassName}
              as={buttonAs}
            >
              {children}
            </Popover.Button>
          </Float.Reference>

          <Float.Content>
            <Transition
              as={Fragment}
              enter='transition ease-out duration-100'
              enterFrom='transform opacity-0 scale-95'
              enterTo='transform opacity-100 scale-100'
              leave='transition ease-in duration-75'
              leaveFrom='transform opacity-100 scale-100'
              leaveTo='transform opacity-0 scale-95'
            >
              <Popover.Panel className='px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm dark:bg-gray-700'>
                <Float.Arrow className='absolute z-0 bg-gray-900 w-5 h-5 rotate-45 border border-gray-900' />
                <div className='relative z-10 text-sm'>{content}</div>
              </Popover.Panel>
            </Transition>
          </Float.Content>
        </Float>
      )}
    </Popover>
  );
}

When I call it with <Tooltip content="Your tooltip content">Trigger</Tooltip> I receive the error when the tooltip hits the right/left side of the window. e.g. when the autoUpdate is triggered to reposition, it trigger the error in Safari.

If autoUpdate is set to false it won't trigger the error.

ycs77 / headlessui-float

Safari triggered "ResizeObserver loop completed with undelivered notifications" on auto update #119