v13.2.5

demo/index.html

@@ -5,13 +5,16 @@
   <script src="/htmlimports.js"></script>
   <title>Gleap Demo</title>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
   <link rel="preconnect" href="https://fonts.gstatic.com" />
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,500;0,700;0,800;1,400&display=swap"
     rel="stylesheet" />
   <link rel="icon" type="image/x-icon" href="fav.png">
   <script src="https://kit.fontawesome.com/0a1af2edbf.js" crossorigin="anonymous"></script>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="height=device-height, 
+                      width=device-width, initial-scale=1.0, 
+                      minimum-scale=1.0, maximum-scale=1.0, 
+                      user-scalable=no, target-densitydpi=device-dpi">
   <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
   <!-- index.js as found in build/index.js -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "13.2.4",
+  "version": "13.2.5",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

src/GleapFrameManager.js

@@ -53,6 +53,19 @@ export default class GleapFrameManager {
 
   constructor() {
     this.startCommunication();
+    if (typeof window !== "undefined") {
+      function appHeight() {
+        try {
+          const doc = document.documentElement;
+          doc.style.setProperty('--glvh', (window.innerHeight * .01) + 'px');
+        } catch (e) { }
+      }
+
+      try {
+        window.addEventListener('resize', appHeight);
+        appHeight();
+      } catch (e) { }
+    }
   }
 
   setUrlHandler(handler) {

src/UI.js

@@ -1510,6 +1510,7 @@ export const injectStyledCSS = (
         max-width: 100vw;
         min-height: 100vh;
         min-height: -webkit-fill-available;
+        max-height: -webkit-fill-available;
         top: 0px;
         bottom: 0px;
         border-radius: 0px;
@@ -1522,7 +1523,7 @@ export const injectStyledCSS = (
       }
 
       .gleap-frame-container:not(.gleap-frame-container--survey):not(.gleap-frame-container--survey-full) .gleap-frame-container-inner {
-        max-height: initial !important;
+        max-height: calc(var(--glvh, 1vh) * 100) !important;
       }
 
       .gleap-frame-container--survey {