The list of mvc-select options is positioned incorrectly with fixedMenuPosition and transform: scale

[Shulyaka]

Describe the bug mvc-select options are positioned incorrectly with fixedMenuPosition when the parent element is scaled. When I open the list, it appears on a different part of the page far away from the field itself.

To Reproduce I've modified someone else's example to demonstrate the point: https://jsbin.com/doqupodavu/1/edit?html,output

  <div style="height: 50vh" id="placeholder"></div> 
  <div style="overflow: hidden">
    <div>
      <mwc-select label="filled" fixedMenuPosition>
        <mwc-list-item></mwc-list-item>
        <mwc-list-item value="0">Item 0</mwc-list-item>
        <mwc-list-item value="1">Item 1</mwc-list-item>
        <mwc-list-item value="2">Item 2</mwc-list-item>
        <mwc-list-item value="3">Item 3</mwc-list-item>
      </mwc-select>
    </div>
  </div>
</body>

The position depends on the scrolling position of the document.

Expected behavior The dropdown list should appear directly under or above the select field

Screenshots

Browser Version (please complete the following information):

• OS: Reproduced on Windows 10 and Fedora 35
• Browser Firefox
• Version 99.0.1

Additional context Please note that I cannot remove fixedMenuPosition in my project because the parent element uses overflow:hidden (see #2062)