mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-11 04:07:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

fixed smooth scrolling issue with mobile webkit (tested on chrome)

Browse Source
This commit is contained in:
Kevin Ross 2016-01-21 13:59:21 -06:00
parent b7364fd445
commit 7f67674897
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scss/_layout.scss
View File

@ -2,6 +2,8 @@
// It allows for flex based positioning such as sticky header and footer inside an mdb-layout, with a // It allows for flex based positioning such as sticky header and footer inside an mdb-layout, with a
// mdb-layout-content that scrolls. // mdb-layout-content that scrolls.
// mobile webkit smooth scrolling: http://stackoverflow.com/a/15147497/2363935
// First element // First element
.mdb-layout-canvas { // added by js? .mdb-layout-canvas { // added by js?
position: absolute; position: absolute;
@ -18,7 +20,7 @@
flex-direction: column; // allows for sticky header and footer flex-direction: column; // allows for sticky header and footer
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
} }
// Header layout (fixed top), belongs in a mdb-layout-container // Header layout (fixed top), belongs in a mdb-layout-container
@ -31,7 +33,7 @@
flex-wrap: nowrap; flex-wrap: nowrap;
flex-shrink: 0; flex-shrink: 0;
justify-content: flex-start; justify-content: flex-start;
transform: translateZ(0); // attempt to smooth out mobile scrolling http://stackoverflow.com/a/15147497/2363935 transform: translateZ(0); // mobile webkit smooth scrolling
} }
// Content layout, belongs in a mdb-layout-container // Content layout, belongs in a mdb-layout-container
@ -41,9 +43,10 @@
display: inline-block; display: inline-block;
//-ms-flex: 0 1 auto; // Fix IE10 bug. //-ms-flex: 0 1 auto; // Fix IE10 bug.
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: scroll; // mobile webkit smooth scrolling
flex-grow: 1; flex-grow: 1;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
} }
// Pushes content to the other end // Pushes content to the other end