diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
index 82079ad5e5abc7..8e31705fba52eb 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -17,12 +17,10 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
   },
   appFrame: {
-    width: 360,
-    height: 360,
-    backgroundColor: theme.palette.background.paper,
+    height: 356,
   },
   menuButton: {
-    marginRight: 20,
+    marginRight: theme.spacing(2),
   },
   button: {
     marginBottom: theme.spacing(1),
@@ -32,25 +30,10 @@ const useStyles = makeStyles(theme => ({
     bottom: theme.spacing(2),
     right: theme.spacing(2),
   },
-  fabMoveUp: {
-    transform: 'translate3d(0, -46px, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
-  },
-  fabMoveDown: {
-    transform: 'translate3d(0, 0, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.leavingScreen,
-      easing: theme.transitions.easing.sharp,
-    }),
-  },
   snackbar: {
-    position: 'absolute',
-  },
-  snackbarContent: {
-    width: 360,
+    [theme.breakpoints.down('xs')]: {
+      bottom: 90,
+    },
   },
 }));
 
@@ -66,10 +49,9 @@ function FabIntegrationSnackbar() {
     setOpen(false);
   }
 
-  const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
-
   return (
     <div className={classes.root}>
+      <CssBaseline />
       <Button className={classes.button} onClick={handleClick}>
         Open snackbar
       </Button>
@@ -89,7 +71,7 @@ function FabIntegrationSnackbar() {
             </Typography>
           </Toolbar>
         </AppBar>
-        <Fab color="secondary" className={fabClassName}>
+        <Fab color="secondary" className={classes.fab}>
           <AddIcon />
         </Fab>
         <Snackbar
@@ -98,7 +80,6 @@ function FabIntegrationSnackbar() {
           onClose={handleClose}
           ContentProps={{
             'aria-describedby': 'snackbar-fab-message-id',
-            className: classes.snackbarContent,
           }}
           message={<span id="snackbar-fab-message-id">Archived</span>}
           action={
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
index 5c17dda66eba31..9112a450218bf5 100644
--- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
+++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
+import CssBaseline from '@material-ui/core/CssBaseline';
 import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -17,12 +17,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     overflow: 'hidden',
   },
   appFrame: {
-    width: 360,
-    height: 360,
-    backgroundColor: theme.palette.background.paper,
+    height: 356,
   },
   menuButton: {
-    marginRight: 20,
+    marginRight: theme.spacing(2),
   },
   button: {
     marginBottom: theme.spacing(1),
@@ -32,25 +30,10 @@ const useStyles = makeStyles((theme: Theme) => ({
     bottom: theme.spacing(2),
     right: theme.spacing(2),
   },
-  fabMoveUp: {
-    transform: 'translate3d(0, -46px, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.enteringScreen,
-      easing: theme.transitions.easing.easeOut,
-    }),
-  },
-  fabMoveDown: {
-    transform: 'translate3d(0, 0, 0)',
-    transition: theme.transitions.create('transform', {
-      duration: theme.transitions.duration.leavingScreen,
-      easing: theme.transitions.easing.sharp,
-    }),
-  },
   snackbar: {
-    position: 'absolute',
-  },
-  snackbarContent: {
-    width: 360,
+    [theme.breakpoints.down('xs')]: {
+      bottom: 90,
+    },
   },
 }));
 
@@ -66,10 +49,9 @@ function FabIntegrationSnackbar() {
     setOpen(false);
   }
 
-  const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown);
-
   return (
     <div className={classes.root}>
+      <CssBaseline />
       <Button className={classes.button} onClick={handleClick}>
         Open snackbar
       </Button>
@@ -89,7 +71,7 @@ function FabIntegrationSnackbar() {
             </Typography>
           </Toolbar>
         </AppBar>
-        <Fab color="secondary" className={fabClassName}>
+        <Fab color="secondary" className={classes.fab}>
           <AddIcon />
         </Fab>
         <Snackbar
@@ -98,7 +80,6 @@ function FabIntegrationSnackbar() {
           onClose={handleClose}
           ContentProps={{
             'aria-describedby': 'snackbar-fab-message-id',
-            className: classes.snackbarContent,
           }}
           message={<span id="snackbar-fab-message-id">Archived</span>}
           action={
diff --git a/docs/src/pages/demos/snackbars/FadeSnackbar.js b/docs/src/pages/demos/snackbars/FadeSnackbar.js
deleted file mode 100644
index e9f96f662fc1c0..00000000000000
--- a/docs/src/pages/demos/snackbars/FadeSnackbar.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import Button from '@material-ui/core/Button';
-import Snackbar from '@material-ui/core/Snackbar';
-import Fade from '@material-ui/core/Fade';
-
-function FadeSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  function handleClick() {
-    setOpen(true);
-  }
-
-  function handleClose() {
-    setOpen(false);
-  }
-
-  return (
-    <div>
-      <Button onClick={handleClick}>Open with Fade Transition</Button>
-      <Snackbar
-        open={open}
-        onClose={handleClose}
-        TransitionComponent={Fade}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">I love snacks</span>}
-      />
-    </div>
-  );
-}
-
-export default FadeSnackbar;
diff --git a/docs/src/pages/demos/snackbars/FadeSnackbar.tsx b/docs/src/pages/demos/snackbars/FadeSnackbar.tsx
deleted file mode 100644
index e9f96f662fc1c0..00000000000000
--- a/docs/src/pages/demos/snackbars/FadeSnackbar.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import Button from '@material-ui/core/Button';
-import Snackbar from '@material-ui/core/Snackbar';
-import Fade from '@material-ui/core/Fade';
-
-function FadeSnackbar() {
-  const [open, setOpen] = React.useState(false);
-
-  function handleClick() {
-    setOpen(true);
-  }
-
-  function handleClose() {
-    setOpen(false);
-  }
-
-  return (
-    <div>
-      <Button onClick={handleClick}>Open with Fade Transition</Button>
-      <Snackbar
-        open={open}
-        onClose={handleClose}
-        TransitionComponent={Fade}
-        ContentProps={{
-          'aria-describedby': 'message-id',
-        }}
-        message={<span id="message-id">I love snacks</span>}
-      />
-    </div>
-  );
-}
-
-export default FadeSnackbar;
diff --git a/docs/src/pages/demos/snackbars/TransitionsSnackbar.js b/docs/src/pages/demos/snackbars/TransitionsSnackbar.js
new file mode 100644
index 00000000000000..75b04f38d62c47
--- /dev/null
+++ b/docs/src/pages/demos/snackbars/TransitionsSnackbar.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import Fade from '@material-ui/core/Fade';
+import Slide from '@material-ui/core/Slide';
+
+function TransitionSlide(props) {
+  return <Slide {...props} direction="up" />;
+}
+
+function TransitionsSnackbar() {
+  const [state, setState] = React.useState({
+    open: false,
+    Transition: Fade,
+  });
+
+  const handleClick = Transition => () => {
+    setState({
+      open: true,
+      Transition,
+    });
+  };
+
+  function handleClose() {
+    setState({
+      ...state,
+      open: false,
+    });
+  }
+
+  return (
+    <div>
+      <Button onClick={handleClick(Fade)}>Fade Transition</Button>
+      <Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
+      <Snackbar
+        open={state.open}
+        onClose={handleClose}
+        TransitionComponent={state.Transition}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
+      />
+    </div>
+  );
+}
+
+export default TransitionsSnackbar;
diff --git a/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx b/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx
new file mode 100644
index 00000000000000..096bcffb7ca1ab
--- /dev/null
+++ b/docs/src/pages/demos/snackbars/TransitionsSnackbar.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Button from '@material-ui/core/Button';
+import Snackbar from '@material-ui/core/Snackbar';
+import Fade from '@material-ui/core/Fade';
+import Slide from '@material-ui/core/Slide';
+import { TransitionProps } from '@material-ui/core/transitions/transition';
+
+function TransitionSlide(props: TransitionProps) {
+  return <Slide {...props} direction="up" />;
+}
+
+function TransitionsSnackbar() {
+  const [state, setState] = React.useState({
+    open: false,
+    Transition: Fade,
+  });
+
+  const handleClick = (Transition: React.ComponentType<TransitionProps>) => () => {
+    setState({
+      open: true,
+      Transition,
+    });
+  };
+
+  function handleClose() {
+    setState({
+      ...state,
+      open: false,
+    });
+  }
+
+  return (
+    <div>
+      <Button onClick={handleClick(Fade)}>Fade Transition</Button>
+      <Button onClick={handleClick(TransitionSlide)}>Slide Transition</Button>
+      <Snackbar
+        open={state.open}
+        onClose={handleClose}
+        TransitionComponent={state.Transition}
+        ContentProps={{
+          'aria-describedby': 'message-id',
+        }}
+        message={<span id="message-id">I love snacks</span>}
+      />
+    </div>
+  );
+}
+
+export default TransitionsSnackbar;
diff --git a/docs/src/pages/demos/snackbars/snackbars.md b/docs/src/pages/demos/snackbars/snackbars.md
index 95f9163fd91a58..c65a4e92f74904 100644
--- a/docs/src/pages/demos/snackbars/snackbars.md
+++ b/docs/src/pages/demos/snackbars/snackbars.md
@@ -52,11 +52,11 @@ Per [Google's guidelines](https://material.io/design/components/snackbars.html#s
 
 {{"demo": "pages/demos/snackbars/ConsecutiveSnackbars.js"}}
 
-### Don't block the floating action button
+### Snackbars and floating action buttons (FABs)
 
-Move the floating action button vertically to accommodate the snackbar height.
+Snackbars should appear above FABs (on mobile).
 
-{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js"}}
+{{"demo": "pages/demos/snackbars/FabIntegrationSnackbar.js", "iframe": true}}
 
 ### Control Direction
 
@@ -68,7 +68,7 @@ Change the direction of the transition. Slide is the default transition.
 
 Use a different transition.
 
-{{"demo": "pages/demos/snackbars/FadeSnackbar.js"}}
+{{"demo": "pages/demos/snackbars/TransitionsSnackbar.js"}}
 
 ## Complementary projects
 
diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js
index bd5e151fe0cd60..b33c58328775ba 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.js
@@ -7,19 +7,18 @@ import { duration } from '../styles/transitions';
 import ClickAwayListener from '../ClickAwayListener';
 import { capitalize, createChainedFunction } from '../utils/helpers';
 import withForwardedRef from '../utils/withForwardedRef';
-import Slide from '../Slide';
+import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
 
 export const styles = theme => {
-  const gutter = 24;
-  const top = { top: 0 };
-  const bottom = { bottom: 0 };
+  const top1 = { top: 8 };
+  const bottom1 = { bottom: 8 };
   const right = { justifyContent: 'flex-end' };
   const left = { justifyContent: 'flex-start' };
-  const topSpace = { top: gutter };
-  const bottomSpace = { bottom: gutter };
-  const rightSpace = { right: gutter };
-  const leftSpace = { left: gutter };
+  const top3 = { top: 24 };
+  const bottom3 = { bottom: 24 };
+  const right3 = { right: 24 };
+  const left3 = { left: 24 };
   const center = {
     left: '50%',
     right: 'auto',
@@ -32,63 +31,65 @@ export const styles = theme => {
       zIndex: theme.zIndex.snackbar,
       position: 'fixed',
       display: 'flex',
-      left: 0,
-      right: 0,
+      left: 8,
+      right: 8,
       justifyContent: 'center',
       alignItems: 'center',
     },
     /* Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. */
     anchorOriginTopCenter: {
-      ...top,
-      [theme.breakpoints.up('md')]: {
+      ...top1,
+      [theme.breakpoints.up('sm')]: {
+        ...top3,
         ...center,
       },
     },
     /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`. */
     anchorOriginBottomCenter: {
-      ...bottom,
-      [theme.breakpoints.up('md')]: {
+      ...bottom1,
+      [theme.breakpoints.up('sm')]: {
+        ...bottom3,
         ...center,
       },
     },
     /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`. */
     anchorOriginTopRight: {
-      ...top,
+      ...top1,
       ...right,
-      [theme.breakpoints.up('md')]: {
+      [theme.breakpoints.up('sm')]: {
         left: 'auto',
-        ...topSpace,
-        ...rightSpace,
+        ...top3,
+        ...right3,
       },
     },
     /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`. */
     anchorOriginBottomRight: {
-      ...bottom,
+      ...bottom1,
       ...right,
-      [theme.breakpoints.up('md')]: {
+      [theme.breakpoints.up('sm')]: {
         left: 'auto',
-        ...bottomSpace,
-        ...rightSpace,
+        ...bottom3,
+        ...right3,
       },
     },
     /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`. */
     anchorOriginTopLeft: {
-      ...top,
+      ...top1,
       ...left,
-      [theme.breakpoints.up('md')]: {
+      [theme.breakpoints.up('sm')]: {
         right: 'auto',
-        ...topSpace,
-        ...leftSpace,
+        ...top3,
+        ...left3,
       },
     },
     /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`. */
     anchorOriginBottomLeft: {
-      ...bottom,
+      ...bottom1,
       ...left,
-      [theme.breakpoints.up('md')]: {
+      [theme.breakpoints.up('sm')]: {
         right: 'auto',
-        ...bottomSpace,
-        ...leftSpace,
+        ...bottom3,
+        ...left3,
       },
     },
   };
@@ -408,7 +409,7 @@ Snackbar.defaultProps = {
     horizontal: 'center',
   },
   disableWindowBlurListener: false,
-  TransitionComponent: Slide,
+  TransitionComponent: Grow,
   transitionDuration: {
     enter: duration.enteringScreen,
     exit: duration.leavingScreen,
diff --git a/packages/material-ui/src/Snackbar/Snackbar.test.js b/packages/material-ui/src/Snackbar/Snackbar.test.js
index 01659025013873..19e5c8441d02e2 100644
--- a/packages/material-ui/src/Snackbar/Snackbar.test.js
+++ b/packages/material-ui/src/Snackbar/Snackbar.test.js
@@ -3,7 +3,7 @@ import { assert } from 'chai';
 import { spy, useFakeTimers } from 'sinon';
 import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils';
 import Snackbar from './Snackbar';
-import Slide from '../Slide';
+import Grow from '../Grow';
 
 describe('<Snackbar />', () => {
   let mount;
@@ -381,9 +381,9 @@ describe('<Snackbar />', () => {
   });
 
   describe('prop: TransitionComponent', () => {
-    it('should use a Slide by default', () => {
+    it('should use a Grow by default', () => {
       const wrapper = mount(<Snackbar open message="message" />);
-      assert.strictEqual(wrapper.find(Slide).exists(), true, 'should use a Slide by default');
+      assert.strictEqual(wrapper.find(Grow).exists(), true);
     });
 
     it('accepts a different component that handles the transition', () => {
diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js
index e5b94060cfe8a1..a141b9bfac1213 100644
--- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js
+++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js
@@ -20,14 +20,12 @@ export const styles = theme => {
       display: 'flex',
       alignItems: 'center',
       flexWrap: 'wrap',
-      padding: '6px 24px',
-      [theme.breakpoints.up('md')]: {
+      padding: '6px 16px',
+      borderRadius: theme.shape.borderRadius,
+      flexGrow: 1,
+      [theme.breakpoints.up('sm')]: {
+        flexGrow: 'initial',
         minWidth: 288,
-        maxWidth: 568,
-        borderRadius: theme.shape.borderRadius,
-      },
-      [theme.breakpoints.down('sm')]: {
-        flexGrow: 1,
       },
     },
     /* Styles applied to the message wrapper element. */
@@ -39,7 +37,7 @@ export const styles = theme => {
       display: 'flex',
       alignItems: 'center',
       marginLeft: 'auto',
-      paddingLeft: 24,
+      paddingLeft: 16,
       marginRight: -8,
     },
   };
diff --git a/pages/api/snackbar.md b/pages/api/snackbar.md
index 8468e1d90a0b18..78e14f8d56aec2 100644
--- a/pages/api/snackbar.md
+++ b/pages/api/snackbar.md
@@ -37,7 +37,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 | <span class="prop-name">onExiting</span> | <span class="prop-type">func</span> |   | Callback fired when the transition is exiting. |
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |   | If true, `Snackbar` is open. |
 | <span class="prop-name">resumeHideDuration</span> | <span class="prop-type">number</span> |   | The number of milliseconds to wait before dismissing after user interaction. If `autoHideDuration` property isn't specified, it does nothing. If `autoHideDuration` property is specified but `resumeHideDuration` isn't, we default to `autoHideDuration / 2` ms. |
-| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Slide</span> | The component used for the transition. |
+| <span class="prop-name">TransitionComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Grow</span> | The component used for the transition. |
 | <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br></span> | <span class="prop-default">{  enter: duration.enteringScreen,  exit: duration.leavingScreen,}</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 | <span class="prop-name">TransitionProps</span> | <span class="prop-type">object</span> |   | Properties applied to the `Transition` element. |