Wrong fixed menu positioning inside a containing block

When using the Select with menuPosition="fixed" inside a parent that is a containing block (all fixed positioned children are positioned relative to it, which can be done using transform: "translate(0)" for example on any of its parents), this causes wrong calculation for the left positioning… is there a way to calculate the left position against some parent element?

CodeSandBox: https://codesandbox.io/s/react-select-forked-x7lb6?file=/example.js:515-541

[viriyadhika]

<Select
   styles={{
      container: () => ({
         position: "static",
         boxSizing: "border-box"
      }),
      menu: () => ({
        position: "fixed",
        width: "50%",
        right: 40
      })
   }}
   value={this.state.value}
   onChange={this.handleChange}
   isMulti
   name="colors"
   options={colourOptions}
   className="basic-multi-select"
   classNamePrefix="select"
/>

It works when menu is positioned at fixed as well. And if we put other elements you can also see that the menu is not a part of the parent flow. Not too sure if this is what you meant tho

<div>
   <Select ... />
   <Others .../>
</div>

[ebonow]

This appears to be resolved as the transform is causing the misalignment and if it is necessary for boundary purposes, then menuPortal will likely be the preferred method.

I will close this, but if there are other concerns or objections, we can discuss further and reopen if necessary.