Popper-core: Wrong positioning if popper is child of positioned parent

[fasvald]

CodePen demo

https://codepen.io/anon/pen/EXQeKp

Steps to reproduce the problem

1. Open https://popper.js.org/
2. Open devtools.
3. Find in tab Elements this element id="page-wrapper"
4. Set CSS props position: absolute
5. A lot of tooltips don't work (especially tooltips with top & bottom position)

What is the expected behavior?

The expected behaviour - all works good and the position of parent element won't crash the tooltips position.

What went wrong?

Any other comments?

Also in this cool lib - https://github.com/atomiks/tippyjs/issues/70

P.S. Your lib also f*cking awesome

[FezVrasta]

I need a reproducible codepen as requested by the issue template you ignored.

[fasvald]

@FezVrasta Okay. I will create Codepen demo. Sorry man.

[fasvald]

@FezVrasta I add CodePen demo. Please recheck and if all good, reopen the issue. Thanks.

[FezVrasta]

I can't see anything wrong in the codepen demo. The tooltip has more left offset because the absolute body is considered the boundaries element (rather than the default document) and then it adds some extra margin.

[atomiks]

https://codepen.io/anon/pen/EXQeKp

[fasvald]

@atomiks thks :)

[tobega]

Found that there is also a problem if the popper element is contained in a relatively positioned element. Don't know if it is the same bug or a different bug. Repro here: https://codepen.io/anon/pen/BdLPxw

[maxpaj]

Is there any neat workaround for this at the moment?

[tobega]

Yes, make all your poppers a child of a "normal" hidden div that is a child
of body.

Den 29 aug. 2017 14:55 skrev "maxpaj" [e-mail]:

Is there any neat workaround for this at the moment?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/FezVrasta/popper.js/issues/331#issuecomment-325654683,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AYAk9wBThTSAXp1_w0s2LndfzOO_xLSMks5sdAo1gaJpZM4OKNXK
.

[FezVrasta]

May someone confirm if this is still valid? I don't seem to be able to reproduce it using the codepen provided

[JosephusPaye]

Hi,

I can still reproduce the bug using the provided Codepen (https://codepen.io/anon/pen/EXQeKp). Same results in Chrome beta 63, Firefox 56, and Edge 40 (all on Windows 10).

After the page loads, the text is added which pushes the reference element down, but the popper stays in the old location. The location is not changed after scroll or resize.

Here's a gif showing the issue: https://i.imgur.com/squuhji.gif

[atomiks]

@JosephusPaye that is 1.12.4 which has that problem. Change the package in the CodePen settings to 1.12.7, and it's fixed

[JosephusPaye]

Hi @atomiks

Does the latest Tippy.js include this fix? This is actually the reason I'm here. I tried using nested tips (like popovers), but the second tip doesn't follow the reference in the first tip when I scroll.

[atomiks]

Unfortunately the latest Popper (1.12.5+) has a bug when updating a popper's position usually when it's near the viewport edges. If the bug is not an issue for you, you can use tippy.standalone.js + the latest Popper.js instead.

Currently, Tippy uses 1.12.4 because of that issue. I'm hoping he is able to fix it soon so it can be updated...

[FezVrasta]

For reference, we are talking about #251