Popper-core: Safari + position: fixed + parent with CSS `will-change` = Misplaced popover

[diondiondion]

Phew, this one took me half a day to track down and reproduce. The combination of browser (Safari) and options (strategy: 'fixed') may sound familiar, but this issue is different from #1121.

CodeSandbox demo

https://codesandbox.io/s/popperjs-safari-bug-reproduction-6olmm

Steps to reproduce the problem

1. Use popper with strategy: 'fixed' within an element that has the CSS rule will-change: transform
2. Observe that the popover is not attached to its reference anymore

What is the expected behavior?

• The popover should be properly positioned relative to the viewport, even when some of its parents use CSS will-change
  

What went wrong?

• The popover's positioning appears to be calculated relative to the parent element with will-change, however since strategy: 'fixed' needs positioning values relative to the viewport, the popover appears in the wrong place:
  

Any other comments?

This seems to have been a regression in 2.4.1. The issue doesn't occur in 2.4.0.

[wszydlak]

It's more Safari problem than Popper.
Safari does not create containing block for elements that have will-change: transform property. On Safari You also need to set transform: translate(0); then it will work.

In older version of popper there was a bug with incorrect detection of containing block, since it was fixed and according to https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block the problem is with Safari.

[diondiondion]

It's more Safari problem than Popper.

Fair enough, figuring out the containing block seems to be a tricky problem.

It would be a good idea to add a note about this to the Browser Support section on the website, I'll see if I can make some time to make a PR for this.

[FezVrasta]

Wondering if we could do some feature detection to make it work out of the box?

[ptu14]

@FezVrasta we all know that containing block detection is broken, and it works differently in every browser. Maybe we should make it possible in such special cases to pass over the element according to which the popper should calculate. Maybe even as experimental.

you can also try to use the way the mezr does it. But it can kill the performance.