Repository: material-ui
Issue: Some components appear far from their original position when the zoom style is applied
Labels: support: question,component: menu,component: tooltip

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

Some components like Menu and Tooltip appear far from their original position when the zoom style is applied like the screenshots below from my local computer:
- for the Menu component
![image](https://user-images.githubusercontent.com/24468466/168476598-baccde61-af01-4b15-a1da-96c4112f579c.png)
- for the Tooltip component
![Screenshot (335)](https://user-images.githubusercontent.com/24468466/168476529-1fe3ef89-66a1-4272-b10c-c255530f8bf1.png)

Here is the original position (when the zoom style is not applied) from my local computer:
- for the Menu component
![image](https://user-images.githubusercontent.com/24468466/168476791-83ce658f-cea0-4df2-911a-5c7e833825da.png)
- for the Tooltip component
![Screenshot (336)](https://user-images.githubusercontent.com/24468466/168476861-9484e039-b59c-45cd-a788-052926a628e7.png)

### Expected behavior 🤔

All components appear from their 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 Menu and Tooltip components
3. The case appears
4. If this case doesn't appear, maybe you could run the code on your local computer


### 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):
```javascript
// 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/github-mui-menu-on-zoom-j7tb7q

This case doesn't happen in the codesandbox but happens in my local computer (also my deployed app) with a similar code like the first four screenshots above
I already use the newest MUI dependencies in my local computer here:
<details>
  <summary>dependencies</summary>

```json
"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"
},
```
</details>

These screenshots below show the result from the codesandbox:
- for the Menu component
![image](https://user-images.githubusercontent.com/24468466/168477292-73b9512d-6db0-441e-a043-320f4f2453fc.png)
- for the Tooltip component
![Screenshot (337)](https://user-images.githubusercontent.com/24468466/168477320-dd40eb1b-f932-4c08-872f-0e01a3a39a5f.png)

I just want to make a note (outside of the case) that the Snackbar component isn't affected by the zoom style on the codesanbox
![image](https://user-images.githubusercontent.com/24468466/168478470-a8c15a89-990a-4b4f-9efa-f3bbec3f8b79.png)
but it's affected by the zoom style on my local computer
![image](https://user-images.githubusercontent.com/24468466/168478560-f7f7d0cf-e763-474c-a7ad-57bc6f83ac5a.png)

### Your environment 🌎

<details>
  <summary>`npx @mui/envinfo`</summary>

```
OS: Windows 11
Browser: Chrome 101
Browser viewport: 1920px x 929px
```
</details>