mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Fixed: Scrolling is not smooth on iOS devices
This commit is contained in:
parent
b2ceb02709
commit
d61549d9e6
|
@ -4,4 +4,5 @@
|
|||
background: #263238;
|
||||
cursor: text;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
flex: 1 0 auto;
|
||||
padding: 40px 24px 24px 24px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -11,6 +11,7 @@
|
|||
height: 140px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
> hr {
|
||||
display: none;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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%);
|
||||
|
|
|
@ -68,6 +68,7 @@ navbar {
|
|||
.navbar-content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -49,6 +49,7 @@ horizontal-layout-1 {
|
|||
transform: translateZ(0);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Content component
|
||||
content {
|
||||
|
|
|
@ -49,6 +49,7 @@ vertical-layout-1 {
|
|||
transform: translateZ(0);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Content component
|
||||
content {
|
||||
|
|
|
@ -32,6 +32,7 @@ vertical-layout-2 {
|
|||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transform: translateZ(0);
|
||||
|
||||
// Container 2
|
||||
|
|
|
@ -32,6 +32,7 @@ vertical-layout-3 {
|
|||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transform: translateZ(0);
|
||||
|
||||
// Container 2
|
||||
|
|
|
@ -149,6 +149,7 @@
|
|||
left: 0;
|
||||
padding: 48px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&.ng-animating {
|
||||
overflow: hidden;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -42,6 +42,7 @@
|
|||
|
||||
.sidenav-content {
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.contact-list, .chat-list {
|
||||
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
mat-toolbar {
|
||||
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
mat-toolbar {
|
||||
|
||||
|
|
|
@ -35,6 +35,7 @@
|
|||
&.compact {
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.invoice-container {
|
||||
padding: 16px;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -43,6 +43,7 @@
|
|||
.content {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -32,6 +32,7 @@
|
|||
> .content {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
#boards {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.board-list {
|
||||
padding: 32px 0;
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
flex: 1 0 auto;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
.todo-header {
|
||||
padding: 24px;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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') {
|
||||
|
|
|
@ -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') {
|
||||
|
|
|
@ -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') {
|
||||
|
|
|
@ -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') {
|
||||
|
|
Loading…
Reference in New Issue
Block a user