From d61549d9e65ffe283077ef1d6a9153d758d3128f Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Fri, 13 Jul 2018 12:23:30 +0300 Subject: [PATCH] Fixed: Scrolling is not smooth on iOS devices --- .../components/highlight/highlight.component.scss | 1 + src/@fuse/components/sidebar/sidebar.component.scss | 1 + .../theme-options/theme-options.component.scss | 1 + src/@fuse/scss/partials/_angular-material-fix.scss | 5 +++++ src/@fuse/scss/partials/_page-layouts.scss | 11 ++++++++++- .../scss/partials/plugins/_ng-pick-datetime.scss | 1 + .../scss/partials/plugins/_ngx-color-picker.scss | 1 + .../components/chat-panel/chat-panel.component.scss | 5 +++-- .../navbar/vertical/style-1/style-1.component.scss | 1 + .../navbar/vertical/style-2/style-2.component.scss | 1 + .../horizontal/layout-1/layout-1.component.scss | 1 + .../layout/vertical/layout-1/layout-1.component.scss | 1 + .../layout/vertical/layout-2/layout-2.component.scss | 1 + .../layout/vertical/layout-3/layout-3.component.scss | 1 + .../main/apps/academy/course/course.component.scss | 1 + .../main/apps/chat/chat-view/chat-view.component.scss | 4 +++- .../chat/sidenavs/left/chats/chats.component.scss | 1 + .../apps/chat/sidenavs/left/user/user.component.scss | 1 + .../sidenavs/right/contact/contact.component.scss | 1 + .../main/apps/e-commerce/order/order.component.scss | 1 + .../main/apps/e-commerce/orders/orders.component.scss | 1 + .../apps/e-commerce/products/products.component.scss | 1 + .../apps/file-manager/file-manager.component.scss | 1 + .../mail-details/mail-details.component.scss | 3 ++- .../apps/mail-ngrx/mail-list/mail-list.component.scss | 3 ++- .../mail/mail-details/mail-details.component.scss | 3 ++- .../main/apps/mail/mail-list/mail-list.component.scss | 3 ++- .../apps/scrumboard/board/list/list.component.scss | 3 ++- .../board/sidenavs/settings/settings.component.scss | 1 + .../main/apps/scrumboard/scrumboard.component.scss | 1 + .../todo/todo-details/todo-details.component.scss | 1 + .../main/apps/todo/todo-list/todo-list.component.scss | 3 ++- .../components/cards/cards.component.scss | 3 ++- .../forgot-password-2.component.scss | 4 +++- .../authentication/login-2/login-2.component.scss | 4 +++- .../register-2/register-2.component.scss | 4 +++- .../reset-password-2/reset-password-2.component.scss | 4 +++- 37 files changed, 69 insertions(+), 15 deletions(-) diff --git a/src/@fuse/components/highlight/highlight.component.scss b/src/@fuse/components/highlight/highlight.component.scss index b723a942..67ada1aa 100644 --- a/src/@fuse/components/highlight/highlight.component.scss +++ b/src/@fuse/components/highlight/highlight.component.scss @@ -4,4 +4,5 @@ background: #263238; cursor: text; overflow: auto; + -webkit-overflow-scrolling: touch; } \ No newline at end of file diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss index 7d46246e..f4a2a765 100644 --- a/src/@fuse/components/sidebar/sidebar.component.scss +++ b/src/@fuse/components/sidebar/sidebar.component.scss @@ -9,6 +9,7 @@ fuse-sidebar { bottom: 0; overflow-x: hidden; overflow-y: auto; + -webkit-overflow-scrolling: touch; width: 280px; min-width: 280px; max-width: 280px; diff --git a/src/@fuse/components/theme-options/theme-options.component.scss b/src/@fuse/components/theme-options/theme-options.component.scss index 8199e635..446f13a9 100644 --- a/src/@fuse/components/theme-options/theme-options.component.scss +++ b/src/@fuse/components/theme-options/theme-options.component.scss @@ -19,6 +19,7 @@ flex: 1 0 auto; padding: 40px 24px 24px 24px; overflow: auto; + -webkit-overflow-scrolling: touch; .header { display: flex; diff --git a/src/@fuse/scss/partials/_angular-material-fix.scss b/src/@fuse/scss/partials/_angular-material-fix.scss index cca511e7..43035a14 100644 --- a/src/@fuse/scss/partials/_angular-material-fix.scss +++ b/src/@fuse/scss/partials/_angular-material-fix.scss @@ -6,6 +6,11 @@ } } +// Fix: "Smooth scrolling for iOS" +.mat-dialog-container { + -webkit-overflow-scrolling: touch; +} + // Fix: "Inconsistent font sizes across elements" .mat-form-field-wrapper { font-size: 16px; diff --git a/src/@fuse/scss/partials/_page-layouts.scss b/src/@fuse/scss/partials/_page-layouts.scss index 70e45445..943a4af2 100644 --- a/src/@fuse/scss/partials/_page-layouts.scss +++ b/src/@fuse/scss/partials/_page-layouts.scss @@ -143,8 +143,9 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too flex: 1 1 auto; > .content { - overflow: auto; flex: 1 1 auto; + overflow: auto; + -webkit-overflow-scrolling: touch; } } } @@ -166,6 +167,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too .tab-content { overflow: auto; + -webkit-overflow-scrolling: touch; } } } @@ -346,6 +348,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too .content { overflow: auto; + -webkit-overflow-scrolling: touch; } } @@ -358,6 +361,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too > .content { flex: 1 1 auto; overflow: auto; + -webkit-overflow-scrolling: touch; } } } @@ -379,6 +383,7 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too .tab-content { overflow: auto; + -webkit-overflow-scrolling: touch; } } } @@ -500,12 +505,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too .content { overflow: auto; + -webkit-overflow-scrolling: touch; } } > .center { flex: 1 1 auto; overflow: auto; + -webkit-overflow-scrolling: touch; } } @@ -528,12 +535,14 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too .content { overflow: auto; + -webkit-overflow-scrolling: touch; } } > .center { flex: 1 1 auto; overflow: auto; + -webkit-overflow-scrolling: touch; } } } diff --git a/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss b/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss index 1829a68a..c7ddf34d 100644 --- a/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss +++ b/src/@fuse/scss/partials/plugins/_ng-pick-datetime.scss @@ -146,6 +146,7 @@ owl-date-time { padding: .25em; background-color: rgba(0, 0, 0, .1); overflow-y: auto; + -webkit-overflow-scrolling: touch; } .owl-calendar-wrapper { diff --git a/src/@fuse/scss/partials/plugins/_ngx-color-picker.scss b/src/@fuse/scss/partials/plugins/_ngx-color-picker.scss index c1a7d1b0..1e269efd 100644 --- a/src/@fuse/scss/partials/plugins/_ngx-color-picker.scss +++ b/src/@fuse/scss/partials/plugins/_ngx-color-picker.scss @@ -11,6 +11,7 @@ height: 140px; overflow-y: auto; overflow-x: hidden; + -webkit-overflow-scrolling: touch; > hr { display: none; diff --git a/src/app/layout/components/chat-panel/chat-panel.component.scss b/src/app/layout/components/chat-panel/chat-panel.component.scss index 424ebca1..01be755c 100644 --- a/src/app/layout/components/chat-panel/chat-panel.component.scss +++ b/src/app/layout/components/chat-panel/chat-panel.component.scss @@ -46,11 +46,11 @@ chat-panel { position: relative; z-index: 5; padding: 16px 0; - overflow: auto; width: 72px; min-width: 72px; max-width: 72px; background-color: #F9F9F9; + overflow: auto; -webkit-overflow-scrolling: touch; // Perfect scrollbar @@ -169,8 +169,9 @@ chat-panel { .messages { position: relative; - overflow: auto; padding: 16px 0 40px 40px; + overflow: auto; + -webkit-overflow-scrolling: touch; .message-row { position: relative; diff --git a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss index d0af9829..136fdcc3 100644 --- a/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss +++ b/src/app/layout/components/navbar/vertical/style-1/style-1.component.scss @@ -117,6 +117,7 @@ navbar { .navbar-scroll-container { overflow-y: auto; + -webkit-overflow-scrolling: touch; background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%), linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%); diff --git a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss index 37c14128..7637b741 100644 --- a/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss +++ b/src/app/layout/components/navbar/vertical/style-2/style-2.component.scss @@ -68,6 +68,7 @@ navbar { .navbar-content { flex: 1 1 auto; overflow-y: auto; + -webkit-overflow-scrolling: touch; } } diff --git a/src/app/layout/horizontal/layout-1/layout-1.component.scss b/src/app/layout/horizontal/layout-1/layout-1.component.scss index 2b0d322d..878691cb 100644 --- a/src/app/layout/horizontal/layout-1/layout-1.component.scss +++ b/src/app/layout/horizontal/layout-1/layout-1.component.scss @@ -49,6 +49,7 @@ horizontal-layout-1 { transform: translateZ(0); overflow-x: hidden; overflow-y: auto; + -webkit-overflow-scrolling: touch; // Content component content { diff --git a/src/app/layout/vertical/layout-1/layout-1.component.scss b/src/app/layout/vertical/layout-1/layout-1.component.scss index 104739f9..dd774c3e 100644 --- a/src/app/layout/vertical/layout-1/layout-1.component.scss +++ b/src/app/layout/vertical/layout-1/layout-1.component.scss @@ -49,6 +49,7 @@ vertical-layout-1 { transform: translateZ(0); overflow-x: hidden; overflow-y: auto; + -webkit-overflow-scrolling: touch; // Content component content { diff --git a/src/app/layout/vertical/layout-2/layout-2.component.scss b/src/app/layout/vertical/layout-2/layout-2.component.scss index e1e6cecb..329fc78b 100644 --- a/src/app/layout/vertical/layout-2/layout-2.component.scss +++ b/src/app/layout/vertical/layout-2/layout-2.component.scss @@ -32,6 +32,7 @@ vertical-layout-2 { width: 100%; overflow-x: hidden; overflow-y: auto; + -webkit-overflow-scrolling: touch; transform: translateZ(0); // Container 2 diff --git a/src/app/layout/vertical/layout-3/layout-3.component.scss b/src/app/layout/vertical/layout-3/layout-3.component.scss index 1351e9b5..27fdc08d 100644 --- a/src/app/layout/vertical/layout-3/layout-3.component.scss +++ b/src/app/layout/vertical/layout-3/layout-3.component.scss @@ -32,6 +32,7 @@ vertical-layout-3 { width: 100%; overflow-x: hidden; overflow-y: auto; + -webkit-overflow-scrolling: touch; transform: translateZ(0); // Container 2 diff --git a/src/app/main/apps/academy/course/course.component.scss b/src/app/main/apps/academy/course/course.component.scss index 58bc612a..8bf70474 100644 --- a/src/app/main/apps/academy/course/course.component.scss +++ b/src/app/main/apps/academy/course/course.component.scss @@ -149,6 +149,7 @@ left: 0; padding: 48px; overflow: auto; + -webkit-overflow-scrolling: touch; &.ng-animating { overflow: hidden; diff --git a/src/app/main/apps/chat/chat-view/chat-view.component.scss b/src/app/main/apps/chat/chat-view/chat-view.component.scss index 3d8efac0..7ad66dd9 100644 --- a/src/app/main/apps/chat/chat-view/chat-view.component.scss +++ b/src/app/main/apps/chat/chat-view/chat-view.component.scss @@ -33,6 +33,7 @@ #chat-content { background: transparent; overflow: auto; + -webkit-overflow-scrolling: touch; .message-row { padding: 16px; @@ -113,9 +114,10 @@ padding-right: 16px; textarea { - overflow: auto; max-height: 80px; transition: height 200ms ease; + overflow: auto; + -webkit-overflow-scrolling: touch; &.grow { height: 80px; diff --git a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss index 4fa85df8..ff075142 100644 --- a/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss +++ b/src/app/main/apps/chat/sidenavs/left/chats/chats.component.scss @@ -42,6 +42,7 @@ .sidenav-content { overflow: auto; + -webkit-overflow-scrolling: touch; .contact-list, .chat-list { diff --git a/src/app/main/apps/chat/sidenavs/left/user/user.component.scss b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss index af7de534..d117d8ac 100644 --- a/src/app/main/apps/chat/sidenavs/left/user/user.component.scss +++ b/src/app/main/apps/chat/sidenavs/left/user/user.component.scss @@ -5,6 +5,7 @@ flex: 1; flex-direction: column; overflow: auto; + -webkit-overflow-scrolling: touch; mat-toolbar { diff --git a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss index af7de534..d117d8ac 100644 --- a/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss +++ b/src/app/main/apps/chat/sidenavs/right/contact/contact.component.scss @@ -5,6 +5,7 @@ flex: 1; flex-direction: column; overflow: auto; + -webkit-overflow-scrolling: touch; mat-toolbar { diff --git a/src/app/main/apps/e-commerce/order/order.component.scss b/src/app/main/apps/e-commerce/order/order.component.scss index 928b0f0b..8e7070af 100644 --- a/src/app/main/apps/e-commerce/order/order.component.scss +++ b/src/app/main/apps/e-commerce/order/order.component.scss @@ -35,6 +35,7 @@ &.compact { padding: 0; overflow: auto; + -webkit-overflow-scrolling: touch; .invoice-container { padding: 16px; diff --git a/src/app/main/apps/e-commerce/orders/orders.component.scss b/src/app/main/apps/e-commerce/orders/orders.component.scss index d0f17870..79156e2e 100644 --- a/src/app/main/apps/e-commerce/orders/orders.component.scss +++ b/src/app/main/apps/e-commerce/orders/orders.component.scss @@ -33,6 +33,7 @@ flex: 1 1 auto; border-bottom: 1px solid rgba(0, 0, 0, .12); overflow: auto; + -webkit-overflow-scrolling: touch; .mat-header-row { min-height: 64px; diff --git a/src/app/main/apps/e-commerce/products/products.component.scss b/src/app/main/apps/e-commerce/products/products.component.scss index 2316405d..f0a69de1 100644 --- a/src/app/main/apps/e-commerce/products/products.component.scss +++ b/src/app/main/apps/e-commerce/products/products.component.scss @@ -32,6 +32,7 @@ flex: 1 1 auto; border-bottom: 1px solid rgba(0, 0, 0, .12); overflow: auto; + -webkit-overflow-scrolling: touch; .mat-header-row { min-height: 64px; diff --git a/src/app/main/apps/file-manager/file-manager.component.scss b/src/app/main/apps/file-manager/file-manager.component.scss index 0866d229..922ee698 100644 --- a/src/app/main/apps/file-manager/file-manager.component.scss +++ b/src/app/main/apps/file-manager/file-manager.component.scss @@ -43,6 +43,7 @@ .content { flex: 1 1 auto; overflow: auto; + -webkit-overflow-scrolling: touch; } } diff --git a/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.scss b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.scss index 173accb2..fbdb3ba0 100644 --- a/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.scss +++ b/src/app/main/apps/mail-ngrx/mail-details/mail-details.component.scss @@ -4,8 +4,9 @@ display: flex; flex-direction: column; flex: 1; - overflow-y: auto; padding: 24px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; .select-message-text { font-size: 24px; diff --git a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.scss b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.scss index 440b75aa..3f214fb0 100644 --- a/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.scss +++ b/src/app/main/apps/mail-ngrx/mail-list/mail-list.component.scss @@ -3,9 +3,10 @@ display: flex; flex-direction: column; flex: 1; - overflow-y: auto; padding: 0; border-right: 1px solid rgba(0, 0, 0, .12); + overflow-y: auto; + -webkit-overflow-scrolling: touch; .no-messages-text { font-size: 24px; diff --git a/src/app/main/apps/mail/mail-details/mail-details.component.scss b/src/app/main/apps/mail/mail-details/mail-details.component.scss index 173accb2..fbdb3ba0 100644 --- a/src/app/main/apps/mail/mail-details/mail-details.component.scss +++ b/src/app/main/apps/mail/mail-details/mail-details.component.scss @@ -4,8 +4,9 @@ display: flex; flex-direction: column; flex: 1; - overflow-y: auto; padding: 24px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; .select-message-text { font-size: 24px; diff --git a/src/app/main/apps/mail/mail-list/mail-list.component.scss b/src/app/main/apps/mail/mail-list/mail-list.component.scss index 440b75aa..3f214fb0 100644 --- a/src/app/main/apps/mail/mail-list/mail-list.component.scss +++ b/src/app/main/apps/mail/mail-list/mail-list.component.scss @@ -3,9 +3,10 @@ display: flex; flex-direction: column; flex: 1; - overflow-y: auto; padding: 0; border-right: 1px solid rgba(0, 0, 0, .12); + overflow-y: auto; + -webkit-overflow-scrolling: touch; .no-messages-text { font-size: 24px; diff --git a/src/app/main/apps/scrumboard/board/list/list.component.scss b/src/app/main/apps/scrumboard/board/list/list.component.scss index 222cda5d..8648de73 100644 --- a/src/app/main/apps/scrumboard/board/list/list.component.scss +++ b/src/app/main/apps/scrumboard/board/list/list.component.scss @@ -28,9 +28,10 @@ .list-content { position: relative; + min-height: 0; overflow: hidden; overflow-y: auto; - min-height: 0; + -webkit-overflow-scrolling: touch; .list-cards { position: relative; diff --git a/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.scss b/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.scss index 61470199..d7bb2c43 100644 --- a/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.scss +++ b/src/app/main/apps/scrumboard/board/sidenavs/settings/settings.component.scss @@ -32,6 +32,7 @@ > .content { flex: 1 1 auto; overflow-y: auto; + -webkit-overflow-scrolling: touch; } } } diff --git a/src/app/main/apps/scrumboard/scrumboard.component.scss b/src/app/main/apps/scrumboard/scrumboard.component.scss index 0f49cf75..a76a7cf9 100644 --- a/src/app/main/apps/scrumboard/scrumboard.component.scss +++ b/src/app/main/apps/scrumboard/scrumboard.component.scss @@ -6,6 +6,7 @@ #boards { width: 100%; overflow: auto; + -webkit-overflow-scrolling: touch; .board-list { padding: 32px 0; diff --git a/src/app/main/apps/todo/todo-details/todo-details.component.scss b/src/app/main/apps/todo/todo-details/todo-details.component.scss index 48c2fd64..3cad424a 100644 --- a/src/app/main/apps/todo/todo-details/todo-details.component.scss +++ b/src/app/main/apps/todo/todo-details/todo-details.component.scss @@ -5,6 +5,7 @@ flex: 1 0 auto; flex-direction: column; overflow-y: auto; + -webkit-overflow-scrolling: touch; .todo-header { padding: 24px; diff --git a/src/app/main/apps/todo/todo-list/todo-list.component.scss b/src/app/main/apps/todo/todo-list/todo-list.component.scss index f96d4072..6b1cb0cd 100644 --- a/src/app/main/apps/todo/todo-list/todo-list.component.scss +++ b/src/app/main/apps/todo/todo-list/todo-list.component.scss @@ -2,10 +2,11 @@ display: flex; flex: 1 0 auto; flex-direction: column; - overflow-y: auto; position: relative; padding: 0; border-right: 1px solid rgba(0, 0, 0, .12); + overflow-y: auto; + -webkit-overflow-scrolling: touch; .no-todos-text { font-size: 24px; diff --git a/src/app/main/documentation/components/cards/cards.component.scss b/src/app/main/documentation/components/cards/cards.component.scss index bb8fa71b..01913e2b 100644 --- a/src/app/main/documentation/components/cards/cards.component.scss +++ b/src/app/main/documentation/components/cards/cards.component.scss @@ -43,9 +43,10 @@ display: flex !important; flex: 1; max-height: 400px; - overflow: auto; min-width: 400px; margin-left: 24px; + overflow: auto; + -webkit-overflow-scrolling: touch; } } } diff --git a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.scss b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.scss index 8bc3c9e0..0e6f0934 100644 --- a/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.scss +++ b/src/app/main/pages/authentication/forgot-password-2/forgot-password-2.component.scss @@ -36,11 +36,13 @@ } #forgot-password-form-wrapper { - overflow: auto; width: 400px; min-width: 400px; max-width: 400px; background: #FFFFFF; + overflow: auto; + -webkit-overflow-scrolling: touch; + @include mat-elevation(16); @include media-breakpoint('sm') { diff --git a/src/app/main/pages/authentication/login-2/login-2.component.scss b/src/app/main/pages/authentication/login-2/login-2.component.scss index 7cd4e27f..6052dc80 100644 --- a/src/app/main/pages/authentication/login-2/login-2.component.scss +++ b/src/app/main/pages/authentication/login-2/login-2.component.scss @@ -36,11 +36,13 @@ } #login-form-wrapper { - overflow: auto; width: 400px; min-width: 400px; max-width: 400px; background: #FFFFFF; + overflow: auto; + -webkit-overflow-scrolling: touch; + @include mat-elevation(16); @include media-breakpoint('sm') { diff --git a/src/app/main/pages/authentication/register-2/register-2.component.scss b/src/app/main/pages/authentication/register-2/register-2.component.scss index f7a7ae6e..597db075 100644 --- a/src/app/main/pages/authentication/register-2/register-2.component.scss +++ b/src/app/main/pages/authentication/register-2/register-2.component.scss @@ -36,11 +36,13 @@ } #register-form-wrapper { - overflow: auto; width: 400px; min-width: 400px; max-width: 400px; background: #FFFFFF; + overflow: auto; + -webkit-overflow-scrolling: touch; + @include mat-elevation(16); @include media-breakpoint('sm') { diff --git a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.scss b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.scss index cd93b69c..01a06ac2 100644 --- a/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.scss +++ b/src/app/main/pages/authentication/reset-password-2/reset-password-2.component.scss @@ -36,11 +36,13 @@ } #reset-password-form-wrapper { - overflow: auto; width: 400px; min-width: 400px; max-width: 400px; background: #FFFFFF; + overflow: auto; + -webkit-overflow-scrolling: touch; + @include mat-elevation(16); @include media-breakpoint('sm') {