fix(multiple): remove webkit-overflow-scrolling (#30003)

This is a non-standard CSS property that only works on mobile Safari and may cause inconsistent behavior by introducing a new stacking context. Users who want this behavior can add the property themselves, but we shouldn't specify it by default. fixes #19374
angular · Nov 13, 2024 · 3a7724e · 3a7724e
1 parent 8016533
commit 3a7724e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.scss b/src/cdk/scrolling/virtual-scroll-viewport.scss
@@ -39,7 +39,6 @@ cdk-virtual-scroll-viewport {
   overflow: auto;
   will-change: scroll-position;
   contain: strict;
-  -webkit-overflow-scrolling: touch;
 }
 
 // Wrapper element for the rendered content. This element will be transformed to push the rendered

diff --git a/src/material/core/style/_menu-common.scss b/src/material/core/style/_menu-common.scss
@@ -18,7 +18,6 @@ $icon-margin: 16px !default;
   min-width: $overlay-min-width;
   max-width: $overlay-max-width;
   overflow: auto;
-  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 }
 
 @mixin item-base() {

diff --git a/src/material/sidenav/drawer.scss b/src/material/sidenav/drawer.scss
@@ -28,13 +28,14 @@ $drawer-over-drawer-z-index: 4;
   @include drawer-stacking-context();
 
   @include token-utils.use-tokens(
-    tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
+    tokens-mat-sidenav.$prefix,
+    tokens-mat-sidenav.get-token-slots()
+  ) {
     @include token-utils.create-token-slot(color, content-text-color);
     @include token-utils.create-token-slot(background-color, content-background-color);
   }
 
   box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
 
   // Need this to take up space in the layout.
   display: block;
@@ -58,8 +59,10 @@ $drawer-over-drawer-z-index: 4;
   }
 
   // Note that the `NoopAnimationsModule` is being handled inside of the component code.
-  &.ng-animate-disabled, .ng-animate-disabled & {
-    .mat-drawer-backdrop, .mat-drawer-content {
+  &.ng-animate-disabled,
+  .ng-animate-disabled & {
+    .mat-drawer-backdrop,
+    .mat-drawer-content {
       transition: none;
     }
   }
@@ -84,7 +87,9 @@ $drawer-over-drawer-z-index: 4;
     visibility: visible;
 
     @include token-utils.use-tokens(
-      tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
+      tokens-mat-sidenav.$prefix,
+      tokens-mat-sidenav.get-token-slots()
+    ) {
       @include token-utils.create-token-slot(background-color, scrim-color);
     }
   }
@@ -128,7 +133,9 @@ $drawer-over-drawer-z-index: 4;
   @include drawer-stacking-context($drawer-over-drawer-z-index);
 
   @include token-utils.use-tokens(
-    tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
+    tokens-mat-sidenav.$prefix,
+    tokens-mat-sidenav.get-token-slots()
+  ) {
     @include token-utils.create-token-slot(color, container-text-color);
     @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
     @include token-utils.create-token-slot(background-color, container-background-color);
@@ -147,14 +154,15 @@ $drawer-over-drawer-z-index: 4;
   overflow-y: auto; // TODO(kara): revisit scrolling behavior for drawers
   transform: translate3d(-100%, 0, 0);
 
-
-  &, [dir='rtl'] &.mat-drawer-end {
+  &,
+  [dir='rtl'] &.mat-drawer-end {
     @include cdk.high-contrast {
       border-right: $high-contrast-border;
     }
   }
 
-  [dir='rtl'] &, &.mat-drawer-end {
+  [dir='rtl'] &,
+  &.mat-drawer-end {
     @include cdk.high-contrast {
       border-left: $high-contrast-border;
       border-right: none;
@@ -170,7 +178,9 @@ $drawer-over-drawer-z-index: 4;
     transform: translate3d(100%, 0, 0);
 
     @include token-utils.use-tokens(
-      tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
+      tokens-mat-sidenav.$prefix,
+      tokens-mat-sidenav.get-token-slots()
+    ) {
       @include token-utils.create-token-slot(border-top-left-radius, container-shape);
       @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
       border-top-right-radius: 0;
@@ -180,7 +190,9 @@ $drawer-over-drawer-z-index: 4;
 
   [dir='rtl'] & {
     @include token-utils.use-tokens(
-      tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
+      tokens-mat-sidenav.$prefix,
+      tokens-mat-sidenav.get-token-slots()
+    ) {
       @include token-utils.create-token-slot(border-top-left-radius, container-shape);
       @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
       border-top-right-radius: 0;
@@ -215,7 +227,9 @@ $drawer-over-drawer-z-index: 4;
   box-shadow: none;
 
   @include token-utils.use-tokens(
-    tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
+    tokens-mat-sidenav.$prefix,
+    tokens-mat-sidenav.get-token-slots()
+  ) {
     @include token-utils.create-token-slot(border-right-color, container-divider-color);
     border-right-width: 1px;
     border-right-style: solid;
@@ -251,7 +265,6 @@ $drawer-over-drawer-z-index: 4;
   width: 100%;
   height: 100%;
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
 }
 
 .mat-sidenav-fixed {