Emscripten: Safe area fixes for iOS 11.2

brackeen · Dec 10, 2017 · 8b6973d · 8b6973d
1 parent d279601
commit 8b6973d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/example/cmake/GLFMAppTarget.cmake b/example/cmake/GLFMAppTarget.cmake
@@ -20,8 +20,18 @@ if (CMAKE_SYSTEM_NAME MATCHES "Emscripten")
             "    <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">\n"
             "    <style>\n"
             "      /* GLFM: Start changes */\n"
-            "      body, html {  border: 0px none; padding: 0px; margin: 0px; width: 100%; height: 100%; overflow: hidden; position: fixed; }\n"
-            "      canvas.emscripten { background: black; width: 100%; height: 100%; padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);}\n"
+            "      :root {\n"
+            "          --glfm-chrome-top-old: constant(safe-area-inset-top);\n"
+            "          --glfm-chrome-right-old: constant(safe-area-inset-right);\n"
+            "          --glfm-chrome-bottom-old: constant(safe-area-inset-bottom);\n"
+            "          --glfm-chrome-left-old: constant(safe-area-inset-left);\n"
+            "          --glfm-chrome-top: env(safe-area-inset-top);\n"
+            "          --glfm-chrome-right: env(safe-area-inset-right);\n"
+            "          --glfm-chrome-bottom: env(safe-area-inset-bottom);\n"
+            "          --glfm-chrome-left: env(safe-area-inset-left);\n"
+            "      }\n"
+            "      body, html { border: 0px none; padding: 0px; margin: 0px; width: 100%; height: 100%; overflow: hidden; position: fixed; }\n"
+            "      canvas.emscripten { background: black; width: 100%; height: 100%; }\n"
             "      .emscripten_border { width: 100%; height: 100%; border: 0px none !important;}\n"
             "      hr { display: none; }\n"
             "      /* GLFM: End changes */"

diff --git a/src/glfm_platform_emscripten.c b/src/glfm_platform_emscripten.c
@@ -94,16 +94,24 @@ void glfmGetDisplayChromeInsets(GLFMDisplay *display, double *top, double *right
     GLFMPlatformData *platformData = display->platformData;
 
     *top = platformData->scale * EM_ASM_DOUBLE_V( {
-        return parseInt(window.getComputedStyle(Module['canvas']).paddingTop);
+        var htmlStyles = window.getComputedStyle(document.querySelector("html"));
+        return (parseInt(htmlStyles.getPropertyValue("--glfm-chrome-top-old")) || 0) +
+               (parseInt(htmlStyles.getPropertyValue("--glfm-chrome-top")) || 0);
     } );
     *right = platformData->scale * EM_ASM_DOUBLE_V( {
-        return parseInt(window.getComputedStyle(Module['canvas']).paddingRight);
+        var htmlStyles = window.getComputedStyle(document.querySelector("html"));
+        return (parseInt(htmlStyles.getPropertyValue("--glfm-chrome-right-old")) || 0) +
+               (parseInt(htmlStyles.getPropertyValue("--glfm-chrome-right")) || 0);
     } );
     *bottom = platformData->scale * EM_ASM_DOUBLE_V( {
-        return parseInt(window.getComputedStyle(Module['canvas']).paddingBottom);
+        var htmlStyles = window.getComputedStyle(document.querySelector("html"));
+        return (parseInt(htmlStyles.getPropertyValue("--glfm-chrome-bottom-old")) || 0) +
+               (parseInt(htmlStyles.getPropertyValue("--glfm-chrome-bottom")) || 0);
     } );
     *left = platformData->scale * EM_ASM_DOUBLE_V( {
-        return parseInt(window.getComputedStyle(Module['canvas']).paddingLeft);
+        var htmlStyles = window.getComputedStyle(document.querySelector("html"));
+        return (parseInt(htmlStyles.getPropertyValue("--glfm-chrome-left-old")) || 0) +
+               (parseInt(htmlStyles.getPropertyValue("--glfm-chrome-left")) || 0);
     } );
 }