Skip to content

Commit 3a7724e

Browse files
authoredNov 13, 2024··
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
1 parent 8016533 commit 3a7724e

File tree

3 files changed

+26
-15
lines changed

3 files changed

+26
-15
lines changed
 

‎src/cdk/scrolling/virtual-scroll-viewport.scss

-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ cdk-virtual-scroll-viewport {
3939
overflow: auto;
4040
will-change: scroll-position;
4141
contain: strict;
42-
-webkit-overflow-scrolling: touch;
4342
}
4443

4544
// Wrapper element for the rendered content. This element will be transformed to push the rendered

‎src/material/core/style/_menu-common.scss

-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ $icon-margin: 16px !default;
1818
min-width: $overlay-min-width;
1919
max-width: $overlay-max-width;
2020
overflow: auto;
21-
-webkit-overflow-scrolling: touch; // for momentum scroll on mobile
2221
}
2322

2423
@mixin item-base() {

‎src/material/sidenav/drawer.scss

+26-13
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,14 @@ $drawer-over-drawer-z-index: 4;
2828
@include drawer-stacking-context();
2929

3030
@include token-utils.use-tokens(
31-
tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
31+
tokens-mat-sidenav.$prefix,
32+
tokens-mat-sidenav.get-token-slots()
33+
) {
3234
@include token-utils.create-token-slot(color, content-text-color);
3335
@include token-utils.create-token-slot(background-color, content-background-color);
3436
}
3537

3638
box-sizing: border-box;
37-
-webkit-overflow-scrolling: touch;
3839

3940
// Need this to take up space in the layout.
4041
display: block;
@@ -58,8 +59,10 @@ $drawer-over-drawer-z-index: 4;
5859
}
5960

6061
// Note that the `NoopAnimationsModule` is being handled inside of the component code.
61-
&.ng-animate-disabled, .ng-animate-disabled & {
62-
.mat-drawer-backdrop, .mat-drawer-content {
62+
&.ng-animate-disabled,
63+
.ng-animate-disabled & {
64+
.mat-drawer-backdrop,
65+
.mat-drawer-content {
6366
transition: none;
6467
}
6568
}
@@ -84,7 +87,9 @@ $drawer-over-drawer-z-index: 4;
8487
visibility: visible;
8588

8689
@include token-utils.use-tokens(
87-
tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
90+
tokens-mat-sidenav.$prefix,
91+
tokens-mat-sidenav.get-token-slots()
92+
) {
8893
@include token-utils.create-token-slot(background-color, scrim-color);
8994
}
9095
}
@@ -128,7 +133,9 @@ $drawer-over-drawer-z-index: 4;
128133
@include drawer-stacking-context($drawer-over-drawer-z-index);
129134

130135
@include token-utils.use-tokens(
131-
tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
136+
tokens-mat-sidenav.$prefix,
137+
tokens-mat-sidenav.get-token-slots()
138+
) {
132139
@include token-utils.create-token-slot(color, container-text-color);
133140
@include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
134141
@include token-utils.create-token-slot(background-color, container-background-color);
@@ -147,14 +154,15 @@ $drawer-over-drawer-z-index: 4;
147154
overflow-y: auto; // TODO(kara): revisit scrolling behavior for drawers
148155
transform: translate3d(-100%, 0, 0);
149156

150-
151-
&, [dir='rtl'] &.mat-drawer-end {
157+
&,
158+
[dir='rtl'] &.mat-drawer-end {
152159
@include cdk.high-contrast {
153160
border-right: $high-contrast-border;
154161
}
155162
}
156163

157-
[dir='rtl'] &, &.mat-drawer-end {
164+
[dir='rtl'] &,
165+
&.mat-drawer-end {
158166
@include cdk.high-contrast {
159167
border-left: $high-contrast-border;
160168
border-right: none;
@@ -170,7 +178,9 @@ $drawer-over-drawer-z-index: 4;
170178
transform: translate3d(100%, 0, 0);
171179

172180
@include token-utils.use-tokens(
173-
tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
181+
tokens-mat-sidenav.$prefix,
182+
tokens-mat-sidenav.get-token-slots()
183+
) {
174184
@include token-utils.create-token-slot(border-top-left-radius, container-shape);
175185
@include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
176186
border-top-right-radius: 0;
@@ -180,7 +190,9 @@ $drawer-over-drawer-z-index: 4;
180190

181191
[dir='rtl'] & {
182192
@include token-utils.use-tokens(
183-
tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
193+
tokens-mat-sidenav.$prefix,
194+
tokens-mat-sidenav.get-token-slots()
195+
) {
184196
@include token-utils.create-token-slot(border-top-left-radius, container-shape);
185197
@include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
186198
border-top-right-radius: 0;
@@ -215,7 +227,9 @@ $drawer-over-drawer-z-index: 4;
215227
box-shadow: none;
216228

217229
@include token-utils.use-tokens(
218-
tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-token-slots()) {
230+
tokens-mat-sidenav.$prefix,
231+
tokens-mat-sidenav.get-token-slots()
232+
) {
219233
@include token-utils.create-token-slot(border-right-color, container-divider-color);
220234
border-right-width: 1px;
221235
border-right-style: solid;
@@ -251,7 +265,6 @@ $drawer-over-drawer-z-index: 4;
251265
width: 100%;
252266
height: 100%;
253267
overflow: auto;
254-
-webkit-overflow-scrolling: touch;
255268
}
256269

257270
.mat-sidenav-fixed {

0 commit comments

Comments
 (0)
Please sign in to comment.