Popper-core: Wrong position of popper element with position:fixed & html/body height: 100%

[sychevyi]

CodePen demo

Bad: https://codepen.io/anon/pen/jwPXXq
Without height: https://codepen.io/anon/pen/qjdLwK
Good: https://codepen.io/anon/pen/mwJavg

Steps to reproduce the problem

1. Open 'bad' example, scroll content. Popper moves away from reference
2. Open 'without height' example, scroll content. Popper stays with reference
3. Open 'good' example, scroll content. Popper stays with reference, as boundariesElement set to 'viewport'

What is the expected behavior?

Popper stays with reference, without additional settings (?)

What went wrong?

If html & body are styled with 'height: 100%', content is scrolled and reference is inside 'position: fixed' container, popper moves away from reference.

Any other comments?

Actually I've found workaround (see 'good' example), just wanted to check if it's a bug or expected behavior.
Thanks for your time!

BTW, thanks for the 'popper-enabled' branch of the 'react-select', works good for me!

[nblackburn]

This seems to have been introduced in one of the more recent releases.

[FezVrasta]

Looks like 1.9.4 broke it.

This is the diff between the previous (1.9.3) working version and the broken one:
https://github.com/FezVrasta/popper.js/compare/v1.9.3...v1.9.4

[hekigan]

Same issue, and as @FezVrasta wrote, if I rollback to v1.9.3, the problem disappears.
In 1.10.8, the problem is still present.

[arvinsingla]

I'm also encountering this when using react-popper in our react app. I only have height: 100% on body. Unfortunately the workaround used by @sychevyi doesn't suit our UX as I need the popper attached to the scrollParent.

[okize]

I'm seeing this issue with height: 100vh on body as well. These body height settings are a common technique used to achieve a "sticky" footer.

[FezVrasta]

May someone confirm it works fine on Safari Mobile? I'm from iPhone now and I see it correctly

[okize]

@FezVrasta looking on my iPhone, the good and bad CodePen examples @sychevyi posted look identical. On desktop (Chrome/Mac) the "bad" example has a popover that drifts away from it's ref as you scroll the content.

[Johann-S]

Is it a good solution to set : boundariesElement: 'viewport' to fix this issue ?
Because if it's the case we should allow to change boudariesElement in Bootstrap Tooltips 🤔

[FezVrasta]

Nope this is a situation popper should handle by default.

[pascalduez]

Hi,

same issue here, as soon as a parent has a heigh: 100% the positioning becomes a bit crazy.
Especially if the popper is rather at the bottom of the parent/page, and the parent/page is scrolled.

Confirmed also that force downgrading to 1.9.3 seems to fix the issue.

[skunkbad]

Now that bootstrap v4 beta is released, and tooltips are now handled by popper.js instead of tether, I think this issue is happening to me. Maybe somebody here can confirm:

https://codepen.io/skunkbad/pen/prrOWR

[pascalduez]

@skunkbad confirmed, looks similar.

[DaleMckeown]

@FezVrasta Just so you know, this bug is still here in 1.12.2.

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

[FezVrasta]

Yes that's why the issue is still open 😉

[Jossnaz]

what is the recommended work around? if there is any I mean... fall back to 1.9.3? does that work with bootstrap 4 beta?

[tpetry]

1.9.3 works with bootstrap 4-beta, have been using it for weeks.

[Johann-S]

With the release of the first Bootstrap 4 beta we recommend to use Popper.js >= 1.11.0

[FezVrasta]

Hey guys, please review this PR https://github.com/FezVrasta/popper.js/pull/394

[FezVrasta]

I reviewed the various repros linked in this issue, the only one that didn't get fixed by 1.12.3 is this one:
https://github.com/FezVrasta/popper.js/issues/302#issuecomment-322022418

I think this problem is related to #331

[FezVrasta]

1.12.5 re-fixed it, sorry for the inconvenience.

[mycarrysun]

Something I was unaware of (and can't find in the docs) is that the popper needs to be outside any elements with abnormal positioning.

I had padding inside the element that the popper was located in (think sidebar padding) and it was pushing the popper off the screen the same amount as the sidebar width. Moving it to the root (outside the element with the padding for the sidebar) fixed the positioning of the popper.

[FezVrasta]

@mycarrysun this shouldn't be the case, please open an issue if you can manage to reduce the problem to a basic code-pen example