PopOver/Menu losses the position when Chrome browser zoomed to less than 100%

[thanmaic]

When i set my browser zoom/display setting on my laptop to any value less than 100%, the position of popover is wrong.
Material UI: ^4.0.0
React: ^17.0.1
Browser: On chrome, version 91

My document.body.style.zoom is at 75%. It works as expected when the value is 100%, but once it is decreased or increased the position of popover is wrong.
Tried both Menu and Popover components for the same, but both doesn't position on zoomed view.

I also tried to position the anchor through anchorPosition prop, calculating the left % is very difficult for all laptop resolutions.

 <div style={{ justifyContent: "space-between", flex: 1, flexDirection: "row" }}>
       <div style={{display: "flex", width: "50%"}}>
             // Some text to render
       </div>
       <div style={{ display:"flex", justifyContent: "flex-end" }}>
              <Button
                aria-controls="simple-menu"
                aria-haspopup="true"
                onClick={this.handleClick}>
                Open Menu
              </Button>
              <Menu
                id="simple-menu"
                anchorEl={anchorEl}
                keepMounted
                open={Boolean(anchorEl)}
                onClose={this.handleClose}>
              <MenuItem onClick={this.handleClose}>Profile</MenuItem>
              <MenuItem onClick={this.handleClose}>My account</MenuItem>
              <MenuItem onClick={this.handleClose}>Logout</MenuItem>
            </Menu>
       </div>
 </div>

I also tried the Popover instead of Menu:

  <Popover
        id="menu-appbar"
        anchorEl={anchorEl}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
        transformOrigin={{ vertical: "top", horizontal: "center" }}
        open={openMenu}
        onClose={menuClose}
        // anchorReference="anchorPosition"
        // anchorPosition={{ top: "5%", left: "75%" }}
      >
        {menus &&
          menus.map((item, index) => (
            <div
              onClick={item.onClick}
              key={index}
              className={classes.menuItemNew}
            >
              <span className={classes.mFontNew}>{item.displayText}</span>
            </div>
          ))}
 </Popover>

Current Behavior 😯

When the browser/display zoom settings is increased or decreased, the popover looses its position and moves away from the anchor.

Expected Behavior 🤔

When the browser/display zoom settings is increased or decreased, the popover should stay in its position with respect to its anchor point.

Steps to Reproduce 🕹

Steps:
1.Set the zoom level to 75% in the app main body tag
2.Write a button and popover to open at the right most corner of the screen, the position of popover is lost and displays somewhere

The same doesn't happen when the zoom is set to 100%, irrespective of left or right of the screen, the popover openly correctly.

Your Environment 🌎

Material UI: ^4.0.0
React: ^17.0.1
Browser: On chrome, version 91
Tried on both MacBook and Windows 10 laptop, same issue.

@oliviertassinari @eps1lon
Any work around or help to make it working is appreciated. I just need to support on Chrome but for any zoomed level.

[oliviertassinari]

Duplicate of #17636

[thanmaic]

@oliviertassinari I see #17636 has no proper solution yet, Do we have a fix or workaround to this problem? This has been a blocker to my work. Please help.