Fix safari scroll bug (in version 12)

app/assets/stylesheets/layout/_base.sass

@@ -31,7 +31,6 @@
   @include default-transition
   display: grid
   grid-template-rows: auto 1fr
-  height: 100%
 
 #main
   display: grid
@@ -51,6 +50,8 @@
   @include styled-scroll-bar
   margin: 0 0 0 0
   padding: 10px 20px
+  // Needed for Safari
+  height: calc(100vh - #{$header-height})
   overflow-y: auto
   overflow-x: hidden
   background-color: #fff

app/assets/stylesheets/layout/_base_mobile.sass

@@ -36,6 +36,14 @@
   #main-menu ~ #content-wrapper
     padding: 15px
 
+  #content-wrapper
+    transition: height .4s
+
+    // Slide header in and out on scroll (see also: _top_menu_mobile.sass)
+    .-header-scrolled &
+      height: 100vh
+      transition: height .4s
+
   #main
     grid-template-columns: auto
 

app/assets/stylesheets/layout/_top_menu_mobile.sass

@@ -34,6 +34,14 @@
     background-color: transparent
 
   #top-menu
+    margin-top: 0px
+    transition: margin-top .4s
+
+    // Slide header in and out on scroll (see also: _base_mobile.sass)
+    .-header-scrolled &
+      margin-top: -55px
+      transition: margin-top .4s
+
     #nav-login-content
       float: none
       padding: 15px 20px

frontend/src/app/globals/global-listeners/top-menu-scroll.ts

@@ -42,16 +42,12 @@ export function scrollHeaderOnMobile(elem:JQuery) {
       return;
     }
 
-    let marginTop:number = -headerHeight;
     if (prevScrollPos !== undefined && currentScrollPos !== undefined && (prevScrollPos > currentScrollPos)) {
-      marginTop = 0;
+      // Slide top menu in or out of viewport and change viewport height
+      jQuery('#wrapper').removeClass('-header-scrolled');
+    } else {
+      jQuery('#wrapper').addClass('-header-scrolled');
     }
-    toggleTopMenu(marginTop);
     prevScrollPos = currentScrollPos;
   });
 }
-
-// Slide top menu in or out of viewport
-function toggleTopMenu(marginTop:number) {
-  jQuery('#top-menu').css({'margin-top': marginTop + 'px', transition:'margin-top .4s'});
-}