From 82deae543eadd5c76b9466e7533bf3070d82ac4c Mon Sep 17 00:00:00 2001
From: Tanya Fomina <fomina.tatianaaa@yandex.ru>
Date: Thu, 7 Apr 2022 01:01:45 +0800
Subject: [PATCH] Scroll fix

---
 src/components/modules/ui.ts | 13 +++++++++++++
 src/styles/ui.css            |  3 ++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/modules/ui.ts b/src/components/modules/ui.ts
index 75bfef90..9e99cb6c 100644
--- a/src/components/modules/ui.ts
+++ b/src/components/modules/ui.ts
@@ -269,6 +269,14 @@ export default class UI extends Module<UINodes> {
     this.isMobile = window.innerWidth < 650;
   }
 
+  /**
+   * Updates --vh variable value, which allows to calculate actual 100vh value for mobile browsers
+   */
+  private setAppHeightFraction(): void {
+    const doc = document.documentElement
+    doc.style.setProperty('--vh', (window.innerHeight * 0.01) + 'px');
+  }
+
   /**
    * Makes Editor.js interface
    */
@@ -437,6 +445,11 @@ export default class UI extends Module<UINodes> {
      * Detect mobile version
      */
     this.checkIsMobile();
+
+    /**
+     * Updates stored window height fraction
+     */
+    this.setAppHeightFraction();
   }
 
   /**
diff --git a/src/styles/ui.css b/src/styles/ui.css
index da65fc37..fbe6fc84 100644
--- a/src/styles/ui.css
+++ b/src/styles/ui.css
@@ -129,7 +129,8 @@
 }
 
 .ce-scroll-locked, .ce-scroll-locked > body {
-  height: 100vh;
+  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
+  height: calc(var(--vh) * 100);
   overflow: hidden;
   /**
    * Mobile Safari fix