Strategy "fixed" + pinch-to-zoom generates incorrect popper position in Safari

[s-bilous]

CodeSandbox demo

https://codesandbox.io/s/strange-hooks-nukkq?file=/src/index.js

Steps to reproduce the problem

1. Open the demo in Safari (iOS or desktop)
2. Open the sandbox embedded browser in a new window
3. Zoom-in browser window using the pinch-to-zoom gesture
4. Scroll the page

What is the expected behavior?

Popper should stay on the bottom side of the reference element when scrolling.

What went wrong?

Popper goes up as far as the scroll position changes.

Any other comments?

[FezVrasta]

What version of Safari are you on? With 13.1 everything looks good to me.

[s-bilous]

The version is 13.1.1. It's important to use the pinch-to-zoom gesture on the trackpad, not command+plus. Or use a mobile browser.

[FezVrasta]

Oh ok thanks, I missed that step, yes I can reproduce it.

[danieldelcore]

Hey, we're running into this issue too!

Looking at the example, it seems like some logic kicks-in whenever it's pinch zoomed. The logic will manually reposition popper (see attached) on scroll thereafter.

I'm completely new to this project so sorry if I'm stating the obvious here but i hope it helps anyway - ha 😜 I'll have poke around today and see if i can find anything else.

[danieldelcore]

After some more digging i've found that the issue is related to this line:

https://github.com/popperjs/popper-core/blob/38914aae7a2e91715c6eb2b563517082a40cfa64/src/modifiers/computeStyles.js#L87

The result of this calculation x -= offsetParent.clientWidth - popperRect.width; changes when we use cmd + and cmd - but if you use pinch to zoom, the calculation remains the same, as if there was no zoom at all.

For example:

• No zoom: x -= offsetParent.clientWidth - popperRect.width; = 366
• Zoom: x -= offsetParent.clientWidth - popperRect.width; = 313
• Pinch zoom: x -= offsetParent.clientWidth - popperRect.width; = 366

Right now i'm thinking that the offsetParent.clientWidth isn't being updated in Safari like we would otherwise expect.

[danieldelcore]

hmmm. appears that this is the culprit: https://stackoverflow.com/questions/6163174/detect-page-zoom-change-with-jquery-in-safari

Safari wont include the zoom in clientWidth & clientHeight but it will update the window.innerWidth / Height...

[danieldelcore]

Hi all, looks like this issue is already fixed in v2.4.1

See this PR

@atomiks we can probably close this issue for now, thanks 😄

[atomiks]

@danieldelcore I can still reproduce it updating to 2.4.1 & 2.4.2 in the CodeSandbox

[danieldelcore]

Sorry about that, yea can still confirm that this is an issue

[AndrewOCC]

I took some time to investigate this issue today, and it looks like like the issue is caused at least in part by a Webkit bug with calculating getBoundingClientRect() when using pinch-to-zoom. Popper.js wraps this function and uses it in a bunch of places to calculate positioning. I assume the same bug causes the inconsistencies with offsetParent that Dan mentioned above.

The bug is tracked in the Webkit issue tracker here, including a simpler popper example as a demonstration: https://bugs.webkit.org/show_bug.cgi?id=207089

I'll look into whether there's an alternate way we can calculate the reference's bounding box and position, and will update in a few hours

[atomiks]

Oh right I made that bug report 🤔

[daneah]

We see an issue with misalignment depending on whether the Safari browser chrome (top navbar, bottom toolbar) is showing or not—is this potentially a flavor of this same issue since it's about calculating bounding boxes and may depend on offsets or clientHeight/innerHeight? Happy to file a separate issue if it seems different!