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

[reinos]

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:https://localhost:3000/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-89c933.ed3b2397a9e1820edd41.js:4060:67
@http:https://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:https://localhost:3000/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-89c933.ed3b2397a9e1820edd41.js:4060:67
@http:https://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.