Popper-core: popper has a 5 pixel offset when its parent and grandparent are relatively positioned

[Leopoldthecoder]

Hi, I'm having a problem that the popper will have a 5 pixel offset horizontally if its parent DOM element and the parent of that element are relatively positioned.

Demo

CodePen: http://codepen.io/leopoldthecoder/pen/Nrdarb
jsfiddle: https://jsfiddle.net/n7sznqvx/

The two demos above are the same, so check either one you want.

Steps to reproduce the problem

1. the popper must have a parent element and a grandparent element
2. the parent and grandparent must have position: relative
   

   What is the expected behavior?

I assigned the placement to bottom-start when creating the popper so I expect the left border of the popper to align with the left border of the reference(in this case, the button element)

What went wrong?

It worked fine until I relatively positioned its two ancestors. In fact, removing position: relative on either one of its two ancestors fixes the problem. But now the popper has left: 5px which I expect left: 0.

Any other comments?

In the demo I turned off gpuAcceleration. If gpuAcceleration is on, the popper will have transform: translate3d(5px, -26px, 0px) which I expect transform: translate3d(0px, -26px, 0px).

Could you tell me why this happens? Thank you.

[FezVrasta]

Setting it to relative creates a new boundary, then, the margin is applied because of options.boundariesPadding

Setting it to 0 fixes your problem.
http://codepen.io/FezVrasta/pen/pbAAYB

[ocombe]

I thought this was a bug as well, I don't really get why "boundariesPadding" is not at 0 by default, it would make more sense

[FezVrasta]

It's just a stylistic reason, it's not nice to have elements that directly touch the edges

[ocombe]

It depends what you use popper for. In my case I use it to position dropdowns for custom selects, and in this case I like it to touch the edges of my reference element

[FezVrasta]

In that case you can tweak the settings 😉

[zoxon]

For version 1.14.6

modifiers: {
  preventOverflow: {
    padding: 0
  }
}

https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.padding