[Menu] Component appear far from their original position when the zoom style is applied

Order ID 💳

48778

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Current behavior :
The pagination component appears far from its original position when the zoom style is applied like the screenshots below from my local computer.

• Here is the condition before the zoom style applied (height dimension > 500px)
  

• Here is the condition after the zoom style applied (height dimension < 500px)
  

Expected behavior :
The pagination component appeasr from its original position whether the zoom style is applied or not.

Steps to reproduce :
Steps:

1. Run the codesandbox above
2. Test the appearance of the pagination components
3. The case appears

Context :
What I want to do is to apply the zoom property on smaller screen sizes so I create this code :

• apply no zoom style to the body and some container components
• apply the zoom style to all component contents

The zoom style is only applied for specific screen sizes (code from my local computer) :

// 1.176470588 = 1 / 0.85

'@media only screen and (max-height: 820px)': {
  'body': {
    zoom: 0.85,
  },
  '.zoom': {
    zoom: 0.85,
  },
  '.no-zoom': {
    zoom: 1.176470588,
  },
}

Here is the codesandbox demo : https://codesandbox.io/s/mui-floating-issues-lsimnx

I also have almost the same problem, but this problem occurs in some components like Menu and Tooltip. I've raised this issue in here, but haven't found a solution yet. I hope you can help solve this problem, thank you.

Environment

"dependencies": {
  "@emotion/react": "^11.9.0",
  "@emotion/styled": "^11.8.1",
  "@mui/icons-material": "^5.6.2",
  "@mui/lab": "^5.0.0-alpha.63",
  "@mui/material": "^5.7.0",
  "@mui/styles": "^5.7.0",
  "@mui/x-data-grid": "^5.10.0",
  "@mui/x-data-grid-pro": "^5.10.0",
  "@testing-library/jest-dom": "^5.16.1",
  "@testing-library/react": "^12.1.2",
  "@testing-library/user-event": "^13.5.0",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "react-router-dom": "^6.2.1",
  "react-scripts": "5.0.0",
  "web-vitals": "^2.1.3"
},

Start by reproducing the pagination issue in the linked CodeSandbox with the zoom media-query styles and compare the behavior of the Pagination, Menu, and Tooltip components. Trace how their positioning is calculated under the zoomed and non-zoomed containers; done means the components remain near their original positions in both conditions.