Problem with the position of popper in react-popper in different device

Question

I am using react-popper and here is what I am supposed to get:

but here is what i got:

It seems to be shifted a bit to the left. The reason behind the problem is this CSS property:

html {
  scrollbar-gutter: stable;
}

It help me prevent content from being pushed when I open a modal that does not allow scrolling but it somehome make the "bottom-end" popper broke.

I tried to get around by using the detect device hooks and it work fine:

import { isBrowser } from "react-device-detect";
 
const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
   placement: "bottom-end",
   modifiers: [{ name: "offset", options: { offset: [isBrowser ? 16 : 0, 4] } }]
});

But I don't like this way much, is there any way to deal with this?