Popper is not correctly placed by 1px for some viewport widths in flexbox container

[piecyk]

CodePen demo

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

Steps to reproduce the problem

1. resize the codepen window

What is the expected behavior?

Popper should be placed pixel perfect to reference element

What went wrong?

For some viewport widths we got in computeStyle popper.left very close to integer value, but Math.flor in this case will break the offset by 1px

popper.left 561.984375
offsets.left 561

https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/modifiers/computeStyle.js#L44 changing it back to Math.round looks like fixes the problem

Any other comments?

Connected with #277

[atomiks]

Maybe centering needs to use floor for left/right, but using shifting like -start and -end should always round. Changing back to round will cause the incorrect centering problem... 🤕

Edit: Actually I think the width of the popper should be computed. If it's an odd number of pixels wide, use floor, otherwise use round.

const roundingFunc = popper.width % 2 === 0 ? Math.round : Math.floor
    
const offsets = {
  left: roundingFunc(popper.left),
  top: Math.round(popper.top),
  bottom: Math.round(popper.bottom),
  right: roundingFunc(popper.right)
};

Play here: https://codepen.io/anon/pen/Pxjdoo

I'll add more tests

[piecyk]

Yep, it could be. In case -start | -end round looks like better fit. Will try to dig more into it 👍

[atomiks]

Looks like the odd/even check doesn't fix it. This seems to work best, and preserves proper rounding for centering:

const roundingFunc = data.placement.indexOf('-') > -1 ? Math.round : Math.floor

[piecyk]

It make sens that the width of popper don't apply in this scenario as we position to edge of reference element, when cantering it's a different story, IMHO this should resolve this issue

Thanks for helping with this 👏