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

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.

[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!