fix: add fallback for viewport height on mobile (#1766)

standardnotes · Oct 7, 2022 · 1e3acd5 · 1e3acd5
1 parent 8de6023
commit 1e3acd5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/packages/web/src/javascripts/App.tsx b/packages/web/src/javascripts/App.tsx
@@ -41,16 +41,17 @@ const getKey = () => {
   return keyCount++
 }
 
-const setViewportHeight = () => {
+export const setViewportHeightWithFallback = () => {
   const currentValue = parseInt(document.documentElement.style.getPropertyValue('--viewport-height'))
   const newValue = visualViewport && visualViewport.height > 0 ? visualViewport.height : window.innerHeight
+  const supportsSVHUnit = CSS.supports('height', '1svh')
 
   if (currentValue && !newValue) {
     return
   }
 
   if (!currentValue && !newValue) {
-    document.documentElement.style.setProperty('--viewport-height', '100vh')
+    document.documentElement.style.setProperty('--viewport-height', supportsSVHUnit ? '100svh' : '100vh')
     return
   }
 
@@ -79,9 +80,9 @@ const startApplication: StartApplication = async function startApplication(
 
   const onDestroy = () => {
     if (device.environment === Environment.Desktop) {
-      window.removeEventListener('resize', setViewportHeight)
+      window.removeEventListener('resize', setViewportHeightWithFallback)
     }
-    window.removeEventListener('orientationchange', setViewportHeight)
+    window.removeEventListener('orientationchange', setViewportHeightWithFallback)
     const rootElement = document.getElementById(ElementIds.RootId) as HTMLElement
     root.unmount()
     rootElement.remove()
@@ -96,10 +97,10 @@ const startApplication: StartApplication = async function startApplication(
 
     disableIosTextFieldZoom()
 
-    setViewportHeight()
-    window.addEventListener('orientationchange', setViewportHeight)
+    setViewportHeightWithFallback()
+    window.addEventListener('orientationchange', setViewportHeightWithFallback)
     if (device.environment === Environment.Desktop) {
-      window.addEventListener('resize', setViewportHeight)
+      window.addEventListener('resize', setViewportHeightWithFallback)
     }
 
     setDefaultMonospaceFont(device.platform)

diff --git a/packages/web/src/javascripts/Application/Application.ts b/packages/web/src/javascripts/Application/Application.ts
@@ -28,6 +28,7 @@ import { ArchiveManager, AutolockService, IOService, WebAlertService, ThemeManag
 import { MobileWebReceiver } from './MobileWebReceiver'
 import { AndroidBackHandler } from '@/NativeMobileWeb/AndroidBackHandler'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { setViewportHeightWithFallback } from '@/App'
 
 type WebServices = {
   viewControllerManager: ViewControllerManager
@@ -233,8 +234,9 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     await this.lockApplicationAfterMobileEventIfApplicable()
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  async handleMobileGainingFocusEvent(): Promise<void> {}
+  async handleMobileGainingFocusEvent(): Promise<void> {
+    setViewportHeightWithFallback()
+  }
 
   async handleMobileLosingFocusEvent(): Promise<void> {
     if (this.protections.getMobileScreenshotPrivacyEnabled()) {
@@ -248,6 +250,8 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     if (this.protections.getMobileScreenshotPrivacyEnabled()) {
       this.mobileDevice().hideMobileInterfaceFromScreenshots()
     }
+
+    setViewportHeightWithFallback()
   }
 
   private async lockApplicationAfterMobileEventIfApplicable(): Promise<void> {

diff --git a/packages/web/src/stylesheets/_main.scss b/packages/web/src/stylesheets/_main.scss
@@ -34,6 +34,8 @@
   @media screen and (max-width: 768px) {
     --sn-stylekit-font-size-editor: 1rem;
   }
+
+  --viewport-height: 100vh;
 }
 
 html {