With a custom ContainerTargetContext on a box with transform css property, the Drop position is wrongly computed.

Indeed, Drop fixed position (width, top, bottom, left) is computed using the place method of DropContainer. (See: https://github.com/grommet/grommet/blob/master/src/js/components/Drop/DropContainer.js#L92) which is using clientRect bounds.

However, according to CSS documentation (https://developer.mozilla.org/fr/docs/Web/CSS/position#fixed), a fixed element will position itself according to viewport only if there is no ancestor with transform, perspective or filter css property.

Expected Behavior

Drop should be positioned next to its target.

Actual Behavior

Drop position get a wrong offset which is linked tot he offset of the ancestor with "transform" property.

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/grommet-v2-template-forked-sgxv28?file=/index.js

Steps to Reproduce

1. Go to the sandbox

2. Click on "Fancy Selector"

3. See that Drop open with a large top offset

4. Remove the transform property

5. Drop is well positionned

Your Environment

• Grommet version: 2.20.1
• Browser Name and version: Firefox 97.0
• Operating System and version (desktop or mobile): Windows 10