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

myusufuw commented 2 years ago

Order ID 💳

48778

Duplicates

[X] I have searched the existing issues

Latest version

[X] 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:

Run the codesandbox above
Test the appearance of the pagination components
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

``` "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" }, ```

m4theushw commented 2 years ago

The pagination component we use is from MUI: https://mui.com/material-ui/api/table-pagination/. We don't have a custom pagination component. This bug is related to the positioning of the Menu component when the menu opens to the top, instead of bottom. I managed to reproduce the bug without the DataGrid: https://codesandbox.io/s/mui-floating-issues-forked-rhimjq?file=/src/components/Vehicles/Vehicles.jsx

I'll transfer this issue to the core repo.

mbayucot commented 2 years ago

@yusufvalid @m4theushw can i pick up this issue?

hbjORbj commented 2 years ago

@mbayucot

Please feel free to!

mbayucot commented 2 years ago

@hbjORbj Thanks

myusufuw commented 2 years ago

@m4theushw ok sir thank you. @mbayucot yes sir, please feel free to.

jaballogian commented 2 years ago

Hi all

I think this issue is not from the MUI or @popperjs/core or React Js library but from the CSS zoom property itself. I also faced the same issue on the React Leaflet and Leaflet Js libraries without using any MUI or @popperjs/core library.

Here is the full explanation https://github.com/mui/material-ui/issues/32777#issuecomment-1249211426

CC @yusufvalid @m4theushw @mbayucot @hbjORbj

mui / material-ui