diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template
index 09a6e7b514..e809d1510f 100644
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -76,7 +76,7 @@
         padding-top: 48px;
       }
       .ohf-logo {
-        margin: max(var(--safe-area-inset-bottom), 48px) 0;
+        margin: max(var(--safe-area-inset-bottom, 0px), 48px) 0;
         display: flex;
         flex-direction: column;
         align-items: center;
diff --git a/src/html/index.html.template b/src/html/index.html.template
index 7ebaf349e6..86031ce67b 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -44,7 +44,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -52,7 +52,7 @@
         padding-top: 48px;
       }
       .ohf-logo {
-        margin: max(var(--safe-area-inset-bottom), 48px) 0;
+        margin: max(var(--safe-area-inset-bottom, 0px), 48px) 0;
         display: flex;
         flex-direction: column;
         align-items: center;