From e7b6370a2ad2cb3708a839728f67e67110b7201c Mon Sep 17 00:00:00 2001
From: Inga Mai <inga.mai@outlook.de>
Date: Mon, 2 Dec 2019 11:16:37 +0100
Subject: [PATCH] Fix safari scroll bug (in version 12)

---
 app/assets/stylesheets/layout/_base.sass             |  3 ++-
 app/assets/stylesheets/layout/_base_mobile.sass      |  8 ++++++++
 app/assets/stylesheets/layout/_top_menu_mobile.sass  |  8 ++++++++
 .../app/globals/global-listeners/top-menu-scroll.ts  | 12 ++++--------
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/layout/_base.sass b/app/assets/stylesheets/layout/_base.sass
index c9033e0b35..64f9b96db0 100644
--- a/app/assets/stylesheets/layout/_base.sass
+++ b/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
diff --git a/app/assets/stylesheets/layout/_base_mobile.sass b/app/assets/stylesheets/layout/_base_mobile.sass
index 5928fcfc6a..7a338dac99 100644
--- a/app/assets/stylesheets/layout/_base_mobile.sass
+++ b/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
 
diff --git a/app/assets/stylesheets/layout/_top_menu_mobile.sass b/app/assets/stylesheets/layout/_top_menu_mobile.sass
index 8e97005435..55b0ab2b5e 100644
--- a/app/assets/stylesheets/layout/_top_menu_mobile.sass
+++ b/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
diff --git a/frontend/src/app/globals/global-listeners/top-menu-scroll.ts b/frontend/src/app/globals/global-listeners/top-menu-scroll.ts
index 278e1f065f..d4130b503a 100644
--- a/frontend/src/app/globals/global-listeners/top-menu-scroll.ts
+++ b/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'});
-}