Popper-core: Popper inside transformed parent doesn't work properly

[FezVrasta]

CodePen demo

https://codepen.io/FezVrasta/pen/QEJGvJ

What is the expected behavior?

The popper should be properly positioned.

What went wrong?

It's not positioned correctly.

Any other comments?

Not an high priority problem, but still nice to have.

[FezVrasta]

I've investigated in the issue and the problem seems related to the element.offsetParent property.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent

It should return the closest positioned element, but it ignores transformed parents (which act as positioned elements tho).

We should come up with a fix for the getOffsetparent function of Popper.js to detect transformed parents as well.

As temporary workaround, one can add a position different from initial to its transformed parent to make Popper.js work properly.

Demo: https://codepen.io/FezVrasta/pen/oLQWqk

@nadiam84 you may find this issue interesting

ping @hgascoigne as seems related to #57

[hgascoigne]

57 does add the isParentTransformed property to the Popper instance. Could a quick fix be to use that to change position on the parent to relative if it is not already set to something other than initial?

[FezVrasta]

I don't think it would help. We have to detect the closest transformed parent, we don't need to change the positioning of anything. If we knew which element to change we would already know what we need

[FezVrasta]

I'm working on some performance optimization and noticed that getOffsetParent is a very sensible function in Popper.js

Even a little improvement that reduced its execution time from 30ms to 15ms allowed me to avoid jank each update. We must find out a very performance effective solution to keep the execution time at max 20ms 😱

[FezVrasta]

Actually it seems to work 🤔 Even on v1