clarify why we need this CSS property

https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
mui · Jun 13, 2021 · d2b4c45 · d2b4c45
1 parent d90fd70
commit d2b4c45
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 6 deletions.
diff --git a/docs/pages/branding/mui-x.tsx b/docs/pages/branding/mui-x.tsx
@@ -490,7 +490,8 @@ const communityData = [
 const Slider = styled('div')(({ theme }) => ({
   scrollSnapType: 'x mandatory',
   display: 'flex',
-  WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
   overflowX: 'scroll',
   margin: '0 -15px',
   '& > div': {

diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js
@@ -29,7 +29,8 @@ const DialogContentRoot = styled('div', {
   },
 })(({ theme, styleProps }) => ({
   flex: '1 1 auto',
-  WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
   overflowY: 'auto',
   padding: '20px 24px',
   ...(styleProps.dividers

diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js
@@ -79,7 +79,8 @@ const DrawerPaper = styled(Paper, {
   height: '100%',
   flex: '1 0 auto',
   zIndex: theme.zIndex.drawer,
-  WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
   // temporary style
   position: 'fixed',
   top: 0,

diff --git a/packages/material-ui/src/ImageList/ImageList.js b/packages/material-ui/src/ImageList/ImageList.js
@@ -36,7 +36,8 @@ const ImageListRoot = styled('ul', {
     overflowY: 'auto',
     listStyle: 'none',
     padding: 0,
-    WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+    // Add iOS momentum scrolling for iOS < 13.0
+    WebkitOverflowScrolling: 'touch',
     /* Styles applied to the root element if `variant="masonry"`. */
     ...(styleProps.variant === 'masonry' && {
       display: 'block',

diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
@@ -49,7 +49,7 @@ const MenuPaper = styled(Paper, {
   // height. This ensures a tapable area outside of the simple menu with which to dismiss
   // the menu.
   maxHeight: 'calc(100% - 96px)',
-  // Add iOS momentum scrolling.
+  // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
 });
 

diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
@@ -113,7 +113,8 @@ const TabsRoot = styled('div', {
 })(({ styleProps, theme }) => ({
   overflow: 'hidden',
   minHeight: 48,
-  WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling.
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
   display: 'flex',
   ...(styleProps.vertical && {
     flexDirection: 'column',