Popper-core: Popper is 5px left offset when using auto, bottom, and bottom-start

[Sawtaytoes]

CodePen demo

https://codepen.io/Saturn2888/pen/dgLyqK

Steps to reproduce the problem

1. Remove margin on HTML body.
2. Put an reference DOM node at 0x0.
3. Add a popper element on the body for that reference DOM node.
4. Popper has a 5px left offset. This happens using auto, bottom, and bottom-start.

What is the expected behavior?

It should be left-aligned with the reference DOM node like it is in every other situation.

What went wrong?

It looks like it's arbitrarily adding a 5px left offset:

transform: translate3d(5px, 100px, 0px)

[FezVrasta]

That's by design. You can change the safe margin in the settings of the preventOverflow modifier

[Sawtaytoes]

Just so I can help out others having the same issue:

In Popper's 3rd arg, pass in the options object with the prop like so:

new Popper(
  referenceNode,
  popperNode,
  {
    modifiers: {
      preventOverflow: {
        padding: 0,
      },
    },
  }
)

From the docs:

Name | Type | Default | Description
-- | -- | -- | --
padding | number | 5 | Amount of pixel used to define a minimum distance between the boundaries and the popper. This makes sure the popper always has a little padding between the edges of its container

[Sawtaytoes]

@FezVrasta I see the same issue when using padding: 0.

I updated my original pen to include this change:
https://codepen.io/Saturn2888/pen/dgLyqK

[FezVrasta]

Wrong syntax:

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

[designbyadrian]

@FezVrasta But why is it offset 5 pixels and not 5/2? This means that you'll get a right margin, but the popper element is flush with the left edge of its container.