Top padding for preventOverflow not respected in macOS Safari & iOS

[goleary]

I have a popper controlled tooltip and I'm trying to create add top padding (50px in this example) to the overflow prevention.

Here you can see even though I've turned on the altAxis overflow prevention.

this is the config I'm using

  const { styles, attributes } = usePopper(range, popperElement, {
    placement: 'top',
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          // TODO: figure out why top padding isn't being respected
          altAxis: true,
          padding: {
            top: 50,
            left: 8,
            right: 8,
            bottom: 8,
          },
        },
      },
    ],
  });

Reproduction demo

https://stackblitz.com/edit/react-popper-overflow?file=Tooltip.tsx

What is the expected behavior?

I'd like the tooltip to respect the top padding as specified in options.

What went wrong?

Top padding not respected.

I know the option is working because the "main" axis padding is respected.

Packages versions

• Popper.js: 2.9.2
• react-popper: 2.2.5

[goleary]

I did a bit more playing around and this bug seems to be environment/browser dependent.

You can see for yourself by using this link (live version of the provide minimal repro above), selecting text & scrolling down until the tooltip should flip.

No issue

• Windows Chrome
• macOS Chrome

Issue Present

• macOS Safari
• iOS (chrome & safari).

[acgblogs]

thanks