Popper-core: In IE11, when the popper is near the viewport boundary, extra spacing is added to the page creating a scrollbar

[caseyjhol]

https://codepen.io/caseyjhol/pen/BVBOVL

Steps to reproduce the problem

1. Click the ref element

What is the expected behavior?

The green pop element appears above the ref element and the rest of the page remains as is with no scrollbar.

What went wrong?

Extra spacing is created below the ref element, creating a scrollbar.

This appears to work properly in all browsers except IE10 and IE11.

I'm using a click listener for the popper (and showing it using display: block to make the issue easier to see, but it persists without one as well (https://codepen.io/caseyjhol/pen/VdZGRY). This issue is the cause of twbs/bootstrap#24851. I go into more detail here: https://github.com/twbs/bootstrap/issues/24851#issuecomment-392584969.

[FezVrasta]

This is not a Popper.js problem, you should apply an initial position to your popper element so that it doesn't cause any overflow (usually top 0 and left 0), we can't do that in Popper.js because it would already be too late.

[caseyjhol]

The problem is occurring because Popper is applying the style top: 0, left: 0 to the element. Because the reference element's parent is positioned relatively, if Popper could detect the element is near the bottom edge of the viewport (which it's already doing) and set bottom: 0, left: 0 instead, the issue could be avoided. This would only come into effect if the parent element is positioned, and could potentially be accomplished with 1 line of code.

[caseyjhol]

@FezVrasta I found a way to fix this with a minimal addition of code (just a few lines). Would you be open to a PR?

[FezVrasta]

Yes I'd be curious to see your proposed solution, but absolutely it's not a bug, maybe a not super clear behavior. Popper elements are supposed to be positioned (initially, by your CSS) in a way that doesn't cause overflows.

[caseyjhol]

The problem occurs because of the top: 0, left: 0 styling that is applied by Popper prior to being positioned correctly via the transform property. So, even if the Popper is positioned manually beforehand, it's irrelevant, because Popper changes the positioning (see https://codepen.io/caseyjhol/pen/wXBdxr). I'll work on getting a PR together today.

[craigjennings11]

I had the same issue, but was able to get around it by disabling gpuAcceleration.

new Popper(..., ..., {
  modifiers: {
    computeStyle: {
      gpuAcceleration: false,
    },
  },
});

[caseyjhol]

@craigjennings11 Awesome - looks like that works!