Skip to content
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

Merged
merged 3 commits into from
Jun 28, 2018
Merged

Conversation

stephenway
Copy link
Contributor

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.

@oliviertassinari oliviertassinari changed the title Menu scroll with tabs [Menu] Fix scrolling issue Jun 28, 2018
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: menu This is the name of the generic UI component, not the React module! labels Jun 28, 2018
@oliviertassinari oliviertassinari merged commit 1963842 into mui:master Jun 28, 2018
@oliviertassinari
Copy link
Member

@stephenway Thanks for taking the time to submit a pull request :).

@stephenway
Copy link
Contributor Author

No problem :)

@stephenway stephenway deleted the MenuScrollWithTabs branch June 28, 2018 19:26
acroyear pushed a commit to acroyear/material-ui that referenced this pull request Jul 14, 2018
* [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
@stephenway
Copy link
Contributor Author

@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.

@oliviertassinari
Copy link
Member

@stephenway I would be happy to review a even better fix to the problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: menu This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants