[Modal] Improve scroll handling (#8715)

docs/src/modules/components/withRoot.js

@@ -41,6 +41,9 @@ const pages = [
       {
         pathname: '/getting-started/supported-platforms',
       },
+      {
+        pathname: '/getting-started/frequently-asked-questions',
+      },
     ],
   },
   {

docs/src/pages/getting-started/frequently-asked-questions.md

@@ -0,0 +1,14 @@
+# Frequently asked questions
+
+Stuck on a particular problem?
+Check some of these common gotchas first.
+
+If you still cannot find what you are looking for, you can ask the community in [gitter](https://gitter.im/callemall/material-ui).
+For how-to questions and other non-issues, please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of Github issues. There is a StackOverflow tag called `material-ui` that you can use to tag your questions.
+
+## Fixed positioned elements move when a modal is opened
+
+We block the scroll as soon as a modal is opened.
+It prevents interacting with the background when the modal should be the only interactive content.
+However, removing the scrollbar can make your **fixed positioned elements** move.
+In this situation, you can apply a global `.mui-fixed` class name to tell Material-UI to handle those elements.

pages/getting-started/frequently-asked-questions.js

@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react';
+import withRoot from 'docs/src/modules/components/withRoot';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from 'docs/src/pages/getting-started/frequently-asked-questions.md';
+
+function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}
+
+export default withRoot(Page);

src/AppBar/AppBar.js

@@ -13,6 +13,7 @@ export const styles = (theme: Object) => ({
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
+    boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
     zIndex: theme.zIndex.appBar,
     flexShrink: 0,
   },