fix: workarounds for CSS issues on Safari

IEduStu · May 1, 2024 · ba55ea9 · ba55ea9
1 parent e380c7e
commit ba55ea9
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 12 deletions.
diff --git a/src/App/styles.less b/src/App/styles.less
@@ -95,8 +95,8 @@ svg {
 }
 
 html {
-    width: ~"100svw";
-    height: ~"100svh";
+    width: ~"calc(max(100svw, 100dvw))";
+    height: ~"calc(max(100svh, 100dvh))";
     min-width: 640px;
     min-height: 480px;
     font-family: 'PlusJakartaSans', 'sans-serif';
@@ -113,11 +113,11 @@ html {
     --calculated-bottom-safe-inset: var(--safe-area-inset-bottom);
 
     @media (display-mode: standalone) {
-        width: ~"max(100%, 100lvw)";
-        height: ~"max(100%, 100lvh)";
+        width: ~"calc(max(100%, 100lvw))";
+        height: ~"calc(max(100%, 100lvh))";
 
         // iOS pads the bottom inset more than needed, so we deduce the actual inset size when using the webapp
-        --calculated-bottom-safe-inset: ~"min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px))))";
+        --calculated-bottom-safe-inset: ~"calc(min(env(safe-area-inset-bottom, 0px), max(16px, calc(100lvh - 100svh - env(safe-area-inset-top, 0px)))))";
     }
 
     body {

diff --git a/src/common/NavBar/HorizontalNavBar/styles.less b/src/common/NavBar/HorizontalNavBar/styles.less
@@ -42,7 +42,7 @@
     }
 
     .back-button-container {
-        margin-left: ~"max(0px, calc(1rem - var(--safe-area-inset-left, 0px)))";
+        margin-left: ~"calc(max(0px, calc(1rem - var(--safe-area-inset-left, 0px))))";
     }
 
     .title {

diff --git a/src/routes/MetaDetails/styles.less b/src/routes/MetaDetails/styles.less
@@ -116,7 +116,7 @@
             align-self: stretch;
             padding: 0 4rem 2rem 4rem;
 
-            padding-left: ~"max(1rem, calc(4rem - var(--safe-area-inset-left, 0px)))";
+            padding-left: ~"calc(max(1rem, calc(4rem - var(--safe-area-inset-left, 0px))))";
         }
 
         .spacing {

diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
@@ -4,8 +4,8 @@
 @import (reference) '~stremio/common/screen-sizes.less';
 
 .control-bar-container {
-    padding-left: ~"max(1.5rem, var(--safe-area-inset-left, 0px))";
-    padding-right: ~"max(1.5rem, var(--safe-area-inset-right, 0px))";
+    padding-left: ~"calc(max(1.5rem, var(--safe-area-inset-left, 0px)))";
+    padding-right: ~"calc(max(1.5rem, var(--safe-area-inset-right, 0px)))";
 
     .seek-bar {
         --track-size: 0.5rem;

diff --git a/src/routes/Player/Video/styles.less b/src/routes/Player/Video/styles.less
@@ -22,9 +22,12 @@
             margin-left: calc(var(--safe-area-inset-left, 0px) * -1);
 
             @media screen and (orientation: landscape) {
-                padding-left: var(--safe-area-inset-left, 0px);
-                padding-right: var(--safe-area-inset-right, 0px);
                 padding-bottom: var(--calculated-bottom-safe-inset, 0px);
+
+                // on most devices, the unsafe areas on the left and right are notches and don't interfere with the video that much
+                // so that padding is commented out
+                // padding-left: var(--safe-area-inset-left, 0px);
+                // padding-right: var(--safe-area-inset-right, 0px);
             }
 
             @media screen and (orientation: portrait) {

diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
@@ -56,7 +56,7 @@ html:not(.active-slider-within) {
             background: transparent;
             overflow: visible;
             padding-left: var(--safe-area-inset-left, 0px);
-            padding-right: ~"max(1rem, var(--safe-area-inset-right, 0px))";
+            padding-right: ~"calc(max(1rem, var(--safe-area-inset-right, 0px)))";
 
             &::before {
                 position: absolute;