In React Material UI v4 or v5, there is a common problem with zoom out, for example, if you put the following style to body or HTML tag:

    body {
    zoom: 80%; /* Zoom out */
    }

all the dropdowns in the Material UI position will be shifted from the correct place that must be on it.

1: This is the correct place without zoom:

2: This is the issue after adding zoom:

3: This is the video for the problem:

Dropdown menu video Mui v4

4: Some notes about this issue:

1- Actually, we can fix the problem using browser zoom out by pressing command and [ - ] key, but I'm looking for a code-based solution without telling the users to do something.

2- Select2 not facing the same issue, you can zoom out and keep the menu in the same place, maybe that because the way of implementing the dropdown is different.

Sandbox link for Select2

3- Angular Material not facing the same issue you can follow the link for the sandbox Angular to make sure there is no issue with zoom out.

5: The question is how to make Material UI behaves like Select2/ Angular Material or the normal dropdown without telling users to do something, How does Material UI determine the dropdown menu position? how we can override this function?