bugfix: webkit scroll #826

assets/css/app.scss

@@ -422,9 +422,9 @@ section[role="main-content"]{
     }
 
     >nav{
-      padding-bottom: 0;
       $pager_h:2em;
-
+      display: flex;
+      flex-direction: column;
       span.nav-title{ display:none; }
 
       section#toc{
@@ -490,7 +490,7 @@ section[role="main-content"]{
         height:$pager_h;
         overflow: hidden;
         box-sizing: content-box;
-        padding:0 1.5em;
+        padding:1em 0 0 1.5em;
         select{
           option{
             padding:0;
@@ -985,6 +985,12 @@ footer[role="tools"]{
   input[type="search"]{
     margin:0;
     padding:0;
+    -webkit-appearance:textfield;
+    -webkit-box-sizing:content-box;
+  }
+  input::-webkit-search-decoration,
+  input::-webkit-search-cancel-button {
+      display: none;
   }
   .vs__search{
     &, &:focus{
@@ -995,6 +1001,12 @@ footer[role="tools"]{
       box-sizing: border-box;
     }
   }
+  .vs__dropdown-toggle{
+    input::placeholder{background-color: #fff;}
+  }
+  .vs__selected-options{
+    background-color: #fff;
+  }
   .vs__actions{
     padding:1px 3px;
     svg[role="presentation"]{

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