diff --git a/examples/ssr/package.json b/examples/ssr/package.json
index f54f77f31dc32b..64559ce1ae3f88 100644
--- a/examples/ssr/package.json
+++ b/examples/ssr/package.json
@@ -8,8 +8,8 @@
     "@babel/plugin-proposal-class-properties": "latest",
     "@babel/preset-env": "latest",
     "@babel/preset-react": "latest",
-    "@material-ui/core": "next",
-    "@material-ui/styles": "next",
+    "@material-ui/core": "latest",
+    "@material-ui/styles": "latest",
     "babel-loader": "latest",
     "express": "latest",
     "nodemon": "latest",
diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js
index 2e9c179422c5ce..149d3475dad8e7 100644
--- a/packages/material-ui/src/Tabs/ScrollbarSize.js
+++ b/packages/material-ui/src/Tabs/ScrollbarSize.js
@@ -8,8 +8,6 @@ const styles = {
   position: 'absolute',
   top: -9999,
   overflow: 'scroll',
-  // TODO Do we need this style for IE 11 support?
-  msOverflowStyle: 'scrollbar',
 };
 
 /**
@@ -17,8 +15,8 @@ const styles = {
  * The component is originates from https://github.com/STORIS/react-scrollbar-size.
  * It has been moved into the core in order to minimize the bundle size.
  */
-function ScrollbarSize(props) {
-  const { onChange } = props;
+export default function ScrollbarSize(props) {
+  const { onChange, ...other } = props;
   const scrollbarHeight = React.useRef();
   const nodeRef = React.useRef(null);
 
@@ -49,11 +47,9 @@ function ScrollbarSize(props) {
     onChange(scrollbarHeight.current);
   }, [onChange]);
 
-  return <div style={styles} ref={nodeRef} />;
+  return <div style={styles} ref={nodeRef} {...other} />;
 }
 
 ScrollbarSize.propTypes = {
   onChange: PropTypes.func.isRequired,
 };
-
-export default ScrollbarSize;
diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
index d61da328c7a41c..9dfd56a7155765 100644
--- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -44,6 +44,11 @@ export const styles = theme => ({
   /* Styles applied to the tablist element if `variant="scrollable"`. */
   scrollable: {
     overflowX: 'scroll',
+    // Hide dimensionless scrollbar on MacOS
+    scrollbarWidth: 'none', // Firefox
+    '&::-webkit-scrollbar': {
+      display: 'none', // Safari + Chrome
+    },
   },
   /* Styles applied to the `ScrollButtonComponent` component. */
   scrollButtons: {},
@@ -118,7 +123,7 @@ class Tabs extends React.Component {
     const conditionalElements = {};
     const scrollable = variant === 'scrollable';
     conditionalElements.scrollbarSizeListener = scrollable ? (
-      <ScrollbarSize onChange={this.handleScrollbarSizeChange} />
+      <ScrollbarSize className={classes.scrollable} onChange={this.handleScrollbarSizeChange} />
     ) : null;
 
     const scrollButtonsActive = showLeftScroll || showRightScroll;
@@ -305,7 +310,7 @@ class Tabs extends React.Component {
       centered,
       children: childrenProp,
       classes,
-      className: classNameProp,
+      className,
       component: Component,
       indicatorColor,
       innerRef,
@@ -328,15 +333,6 @@ class Tabs extends React.Component {
         'at the same time on a `Tabs` component.',
     );
 
-    const className = clsx(classes.root, classNameProp);
-    const flexContainerClassName = clsx(classes.flexContainer, {
-      [classes.centered]: centered && !scrollable,
-    });
-    const scrollerClassName = clsx(classes.scroller, {
-      [classes.fixed]: !scrollable,
-      [classes.scrollable]: scrollable,
-    });
-
     const indicator = (
       <TabIndicator
         className={classes.indicator}
@@ -382,19 +378,28 @@ class Tabs extends React.Component {
     const conditionalElements = this.getConditionalElements();
 
     return (
-      <Component className={className} ref={innerRef} {...other}>
+      <Component className={clsx(classes.root, className)} ref={innerRef} {...other}>
         <EventListener target="window" onResize={this.handleResize} />
-        {conditionalElements.scrollbarSizeListener}
         <div className={classes.flexContainer}>
           {conditionalElements.scrollButtonLeft}
+          {conditionalElements.scrollbarSizeListener}
           <div
-            className={scrollerClassName}
+            className={clsx(classes.scroller, {
+              [classes.fixed]: !scrollable,
+              [classes.scrollable]: scrollable,
+            })}
             style={this.state.scrollerStyle}
             ref={this.handleTabsRef}
             role="tablist"
             onScroll={this.handleTabsScroll}
           >
-            <div className={flexContainerClassName}>{children}</div>
+            <div
+              className={clsx(classes.flexContainer, {
+                [classes.centered]: centered && !scrollable,
+              })}
+            >
+              {children}
+            </div>
             {this.state.mounted && indicator}
           </div>
           {conditionalElements.scrollButtonRight}