Popper-core: Popper shows up at the wrong location for a [position:fixed, scrollable] reference element

[mirraj2]

CodePen demo

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

Steps to reproduce the problem

1. Position the ref element so that it is inside of a scrollable, fixed positioned container
2. Set placement to "top"

What is the expected behavior?

I expect that the popup shows ABOVE the reference element, because I put {placement: "top"}

What went wrong?

Instead, the popup displays right over the reference element instead of the space above it.

Any other comments?

This was originally a bug that I filed with Tippy, but upon further investigation, it is a bug with Popper. You can find the Tippy Issue here: https://github.com/atomiks/tippyjs/issues/228

Note that the codepen linked above does NOT use the Tippy library. It only uses Popper.

[jmperro]

Same here

[ednjv]

Same problem here

[peda]

I'm having the same issue

[jinhucheung]

Same problem here

[FezVrasta]

Hey guys, I got it :-) I have already labelled the issue, if anyone wants to work on that please feel free to submit a PR with the fix.

[chrismllr]

@FezVrasta New to the library, and really digging it. Just ran into this issue. Any direction on where to begin to look?

[broyde]

@mirraj2 Seems I've found the solution.
Try

  modifiers: {
    preventOverflow: {
      escapeWithReference: true
    }
  }

[lionpeloux]

Same problem here. Is this the right fix ?

[johnknoop]

@lionpeloux

escapeWithReference for sure does something, but it doesn't solve the problem for me.

[anhhtz]

@mirraj2 Seems I've found the solution.
Try

  modifiers: {
    preventOverflow: {
      escapeWithReference: true
    }
  }

Sorry, but where to put the code above ? :o

[broyde]

@anhhtz

Sorry, but where to put the code above ? :o

In Popper's options. See documentation

[FezVrasta]

It seems fixed in v2

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