Listbox: location of ListboxOptions is off when CSS-zoom on body differs from 1

[ta834n]

When the CSS-Zoom on the body-element differs from 1 the location of the ListboxOptions is way off.

Screenshot with zoom = 1:

Screenshot with zoom = 1.25

Example:

export const DropdownZoom = () => {
  useEffect(() => {
    document.body.style.zoom = '1.25';
    return () => {
      document.body.style.zoom = '1';
    };
  }, []);

  return (
    <div className="flex flex-col gap-y-xl">
      <Listbox __demoMode={true} value="1">
        <ListboxButton className="bg-level-40">Option 1</ListboxButton>
        <ListboxOptions anchor="bottom" className="bg-level-80">
          <ListboxOption value="1">
            <span>Option 1</span>
          </ListboxOption>
          <ListboxOption value="2">
            <span>Option 2</span>
          </ListboxOption>
          <ListboxOption value="3">
            <span>Option 3</span>
          </ListboxOption>
        </ListboxOptions>
      </Listbox>
    </div>
  );
};

What package within Headless UI are you using?

"@headlessui/react": "2.1.2"

What browser are you using?

Chrome Version 128.0.6613.113 (Official Build) (64-bit)

Suspicion

I suspect that the behavior changed with the Chrome-release.