-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Menu] Fix scrolling issue #12003
[Menu] Fix scrolling issue #12003
Conversation
@stephenway Thanks for taking the time to submit a pull request :). |
No problem :) |
* [Menu] Position menu paper at same level as other relative components to unblock scrolling * [Menu] Switch relative to translate3d technique for better coverage and layout * Update Menu.js
@oliviertassinari We got this wrong, I need to submit a new PR to undo this on the menu component and then append the transform on the popover that is scaling(1,1). The scale is winning over the translate that fixed scrolling. I'll do that sometime today. |
@stephenway I would be happy to review a even better fix to the problem. |
Applied this manually: mui/material-ui#12003
What's happening is other elements on the page like Tabs are higher in the z-index by merely being relative elements. So with that we enter a z-index war with elements like this paper menu which aren't raised up in the z-index. Adding translate3d to the paper styles ensures that when it's open, you can interact with the menu for scrolling, otherwise your effectively scrolling the other competing element. Fixes #10601
Updated demo of the fix here
My thanks to @lgerndt for discovering an easy fix.