Fix Popover bug with fixed positioned children

[dleroux]

WHY are these changes introduced?

Because transformed elements create a containing block for all its positioned descendants, a recent change to the Popover breaks react-draggable-hoc.

WHAT is this pull request doing?

removes the transform on the popover-overlay when it's opened

Current:
https://user-images.githubusercontent.com/1229901/142909448-a6880dc9-2d4c-48f7-ac3f-89602dd28cf1.mov

Fixed:
https://user-images.githubusercontent.com/1229901/142909436-fd697dd9-fe91-4453-9011-3a1b781962ef.mov

How to 🎩

In storybook ensure this didn't break the animation on the popover.

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	166.12 KB (0%)
esm	96.68 KB (0%)
esnext	143.24 KB (+0.01% 🔺)
css	34.29 KB (+0.01% 🔺)

[danny-williams]

The video you link @dleroux LGTM! 👍

[danny-williams]

@dleroux still seeing this issue in prod. Assuming we're held up by code freeze, ya?