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

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.

[broyde]

@mirraj2 Seems I’ve found the solution. Try

  modifiers: {
    preventOverflow: {
      escapeWithReference: true
    }
  }

[johnknoop]

@lionpeloux

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