Dropdown bug with initial position in IE 11

[Dani216]

Hi everyone,

I have same issue as is in docs, do you have any advice how to solve this? After click on menu item it opens the dropdown, but initial position of dropdown is left and that cause stretching body tag and move screen to the left.
It works in Chrome but in IE11 not, sadly IE11 is important for us.

1. Open IE 11
2. Goto https://bootstrap-vue.js.org/docs/components/button-group/#dropdown-menu-support
3. Resize browser to approximatly 520px

• Windows 10, IE11, 1.0.0-beta.9

Thanks
Dan

[mosinve]

have you tried to explicitly define opening position of dropdown menu by right prop, as described here https://bootstrap-vue.js.org/docs/components/dropdown#menu-left-and-right-alignment ?

update Ah...i see... yes prop is set ;)

[mosinve]

Checked at Windows 8.1 IE10 - works ok

[Dani216]

Here similar code to main, also I upgrade version to 1.0.0:
https://jsfiddle.net/pow8fbsh/2/

Try multiple-times click to dropdown. You will see similar behavior as above.
!All menu items must be in one row.

Before click to dropdown menu item:

After:

[tmorehouse]

Do you see a similar issue in regular bootstrap V4.beta.2 markup/jQuery? just wondering if this might be an upstream issue with Bootstrap and Popper.js positioning.

[tmorehouse]

It appears that dropdown buttons in general inside button groups do not render correctly in IE11 (notice the middle dropdown button's caret is partially obscured by the button to the right of it).

[tmorehouse]

This also appears in native Bootstrap V4 CSS issue with IE