Misposition of HoverMenu in Firefox mobile view.

[Norlandz]

Im using the cascading-hover-menus in my project.
(ie, this one: https://jcoreio.github.io/material-ui-popup-state/#cascading-hover-menus)

It works, until I try it in Firefox mobile.
The popup position is wrong.
It seems all HoverMenu are placed to the left no matter where my menu buttons are located at.

PS:
It seems like the popup is generated by computing the left and top position.
Instead of using relative absolute position.

---

It feels like its some how calculating basing on the width of the device?
If I rotate the device orientation, some menu dropdown position are fine.
But if the menu button is too far right, the menu dropdown position cant go any further to the right, and all positioned fixed to a point it can go any further.

---

Tested on v5.3.3 v5.3.6

[Norlandz]

Its not just this library.
react-toastify https://github.com/fkhadra/react-toastify
Seems also have such problem.

--
It seems due to
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I have to remove this line.

android - Mobile Firefox ignores Viewport completely - Stack Overflow
https://stackoverflow.com/questions/16122910/mobile-firefox-ignores-viewport-completely

[jedwards1211]

Okay thanks, I'll see about making that change to the demo. This library doesn't manage positioning, it just manages setting the anchor element. @mui/material manages positioning the popover relative to the anchor element.

[Norlandz]

@jedwards1211 thanks for the reply.

• Again, <meta name="viewport" content="width=device-width, initial-scale=1.0" /> seems the key issue.

  Basing on my research, this seems more likely due to
  how Firefox mobile calculates the viewport width,
  and result in the misposition of the HoverMenu.

• Only Firefox mobile has such problem, Chrome, Edge doesnt.

  • I tests Chrome, Firefox on:
    • real mobile,
    • PC Browser debugging simulating mobile device,
    • Android Emulator.
      Firefox shows such problem in all those test.

• I dont know if that can be fixed from your end or MUI.
  I dont even know if that is firefox's problem,
  or the specification of <meta name="viewport" content="width=device-width, initial-scale=1.0" /> is just unclear and doesnt get implemented strictly by browsers.