Fixed: Scrolling is not smooth on iOS devices

src/@fuse/components/highlight/highlight.component.scss

@@ -4,4 +4,5 @@
     background: #263238;
     cursor: text;
     overflow: auto;
+    -webkit-overflow-scrolling: touch;
 }

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;

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;

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;

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;
                     }
                 }
             }

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 {

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;

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;

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%);

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;
         }
 
     }

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 {

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 {

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

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

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;

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;

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 {
 

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 {
 

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 {
 

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;

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;

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;

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;
         }
     }
 

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;

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;

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;

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;

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;

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;
             }
         }
     }

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;

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;

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;

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;
                     }
                 }
             }

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') {

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') {

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') {

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') {