bugfix: webkit scroll #826

assets/css/base/_layout.scss

@@ -33,13 +33,17 @@ body{
     }
   }
   section[role="main-content"]{
+    display: flex;
     flex:1 1 auto;
     @extend %layout-element;
     overflow: hidden;
+    position: relative;
     >.wrapper{
       position: relative;
       padding:0 $side-padding 0 $side-padding;
-      height:100%; max-height:100%;
+      // height:100%; max-height:100%;
+      display: flex;
+      flex: 1;
       overflow-y: hidden;
       overflow-x: hidden;
       >*{
@@ -51,16 +55,21 @@ body{
       }
     }
     .main-content-layout{
-      height: 100%;
+      position: relative;
+      // https://stackoverflow.com/a/33644245
+      display: flex;
+      flex: 1;
+      >section{
+        max-height: 100%;
+      }
       >header,
-      >section,
+      >section>.wrapper,
       >nav{
+        box-sizing: border-box;
         max-height: 100%;
         padding-top:1em;
-        padding-bottom:1em;
       }
-
-      >section,
+      >section>.wrapper,
       >nav{
         overflow-x: hidden;
         overflow-y: auto;

assets/css/base/_transitions.scss

@@ -46,14 +46,6 @@
   }
 }
 
-// .fade-enter,
-// .fade-leave-to{
-//   opacity: 0;
-// }
-// .fade-enter-to,
-// .fade-leave{
-//   opacity:1;
-// }
 .fade-enter-active{
   transition: all 300ms ease-in-out;
 }
@@ -61,13 +53,6 @@
   transition: all 200ms ease-in-out;
 }
 
-// .fade-enter-active,
-// .fade-leave-active {
-//   transition-duration: 0.3s;
-//   transition-property: opacity;
-//   transition-timing-function: ease;
-// }
-
 .fade-enter,
 .fade-leave-active {
   opacity: 0