[Popover] Wrong positioning

https://codesandbox.io/s/simplepopover-material-demo-forked-hj680
Notice how popover is shifted from expected position. This seems to be caused by the 'incorrect' top left CSS property values.

Those position values are traced back to getBoundingClientRect() call in referenced codes below.
https://github.com/mui-org/material-ui/blob/7855f2b967b7edaae012f35e18480fa72374fcfd/packages/material-ui/src/Popover/Popover.js#L140
https://github.com/mui-org/material-ui/blob/7855f2b967b7edaae012f35e18480fa72374fcfd/packages/material-ui/src/Popover/Popover.js#L219

Certain CSS properties combinations change containing block calculation for child DOM elements. Details explained here.
When container is set to some DOM element happens to be the situation, position values would need an extra calculation based on the value from getBoundingClientRect(), e.g., subtract position value of the container.

All components internally use popover (e.g. Menu) should suffer the same problem.

Start with packages/material-ui/src/Popover/Popover.js at the getBoundingClientRect() calls linked in the issue, and reproduce the shifted position using the provided CodeSandbox with a custom container. Trace how the container and containing block affect the calculated coordinates, then verify that Popover and components such as Menu are positioned correctly in that scenario.