Popover overflows container (regression)

[christianboyle]

Operating system and version (Windows, macOS, Android, iOS)

• Windows 10, Build 19042 (10.0.19042)

Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)

• Google Chrome, Version 87.0.4280.88 (Official Build) (64-bit)

--

Note: This bug seems to have been introduced during the transition from "popper.js": "^1.16.1" to "@popperjs/core": "^2.5.4".

Steps to reproduce the problem

1. Visit https://getbootstrap.com/docs/4.5/components/popovers/#four-directions
2. Trigger "Popover on Left" and "Popover on Right"
3. Notice both adjust their position to be fully visible inside the body when viewport is sufficiently narrow
4. Visit https://getbootstrap.com/docs/5.0/components/popovers/#four-directions
5. Trigger "Popover on Left" and "Popover on Right"
6. Notice both overflow the body when viewport is sufficiently narrow

What is the expected behavior?

Expected behavior is for popovers to not overflow their container (like in Bootstrap 4.5.1).

What went wrong?

It seems like there's been some change in the inline styles that are applied by Popper where we no longer perform:
transform: translate3d(x, y, z)
and instead use:
transform: translate(x, y).

Any other comments?

Maybe this change from 10 months ago had something to do with it.

[MartijnCuppens]

It seems we got to explicitly define our fallback behaviour. See this demo, based on popper's tutorial: https://codepen.io/MartijnCuppens/pen/QWKKmLg?editors=1010 (Uncomment js for fix)

[christianboyle]

That was fast, thanks everyone!