MenuPortal placement is off for position='fixed' if a parent has transform: scale

[kbrooks]

Bug description

For a menu inside a scaled div, the top and left properties on MenuPortal styles are calculated based on the viewport instead of based on the "containing block", which is the scaled div.

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none (see CSS Transforms Spec), which then causes that ancestor to take the place of the elements containing block. https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed_positioning

This causes the menuportal to be displayed to the bottom-right of where it should be:

The issue is simple to reproduce by placing a ReactSelect component inside of a div with a transform: scale style.

import React from "react";
import ReactDOM from "react-dom";

import ReactSelect from "react-select";

function Selection() {
  return (
    <ReactSelect
      menuPosition="fixed"
      options={[
        {
          label: "hi",
          value: "hi",
        },
        {
          label: "bye",
          value: "bye",
        },
      ]}
    />
  );
}

function FixedBox({ children }: { children: React.ReactNode }) {
  return (
    <div
      style={{
        margin: 100,
        border: "1px solid black",
        transform: "scale(1)",
      }}
    >
      <h1>fixed container</h1>
      {children}
    </div>
  );
}

function Example() {
  return (
    <FixedBox>
      <Selection />
    </FixedBox>
  );
}

ReactDOM.render(<Example />, document.getElementById("root"));

sandbox link

[AlexGaputin]

+1, this is a problem