Popper-core: Position issue when scroller is inside another scroller

[Cryde]

CodePen demo

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

Steps to reproduce the problem

1. simply hover the button => Tooltip appear correctly
2. scroll on the outer scroller (body one)
3. Tooltip isn't properly displayed (not at the right position)

What is the expected behavior?

The tooltip should be displayed at the right position (the same when the page is render, when no scroll is made)

What went wrong?

The position calculation is made based on the body scroller and also the tooltip is inserted into the body instead of the inner scroller.
So when I scroll outside, the position become wrong.

[FezVrasta]

Can you please convert the codepen to use only Popper.js and not any 3rd party library?

[Cryde]

Here is the example : https://codepen.io/anon/pen/dWXZXR

[FezVrasta]

The interested file is getOffsetRectRelativeToArbitraryNode. We are addressing the scroll offsets of only the first scrollable parent instead of including all the scrollable parents contained in the common offset parent.

[marvinhuebner]

Is there a possible fix available in the near future?

I'm using https://github.com/atomiks/tippyjs in a Project and it is really awesome and popper.js does also a good Job. But we have some trouble with Elements which are inside a scrollable Container.

Really looking forward.

[FezVrasta]

You could send a PR to introduce a failing test case in our functional tests to help me fix the bug

[FezVrasta]

@vladferix unfortunately +1 will not make a CI test magically appear 😞

[FezVrasta]

Adding a different codepen from #245 for completeness.

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

[FezVrasta]

Added CI test dfb6129160e28cbb4515af7e51be6353c59e7784

[franciscolourenco]

Is there any known version of popper.js not affected by this bug?

[FezVrasta]

I don't think so

[franciscolourenco]

Why doesn't scrolling example in the landing page exhibit the problem? https://popper.js.org/

[FezVrasta]

Probably because I manually define the boundariesElement

[franciscolourenco]

Probably because I manually define the boundariesElement

Could you point the line where that is done?

[FezVrasta]

Sorry, the boundariesElement is automatically set to the example container because .example sets position: relative

[franciscolourenco]

Also the popper markup has to placed inside of the relative element. Doesn't work if it is outside.

[franciscolourenco]

Is this issue somehow related to #264 and #253?

[FezVrasta]

Nope I don't think so