fix: media queries width <|> to max|min-width (#133)

wevm · Mar 12, 2024 · ae4eca2 · ae4eca2
1 parent 6fcc9e5
commit ae4eca2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/tricky-planes-bake.md b/.changeset/tricky-planes-bake.md
@@ -0,0 +1,5 @@
+---
+"vocs": patch
+---
+
+Fixed unsupported media-queries in iOS15^ Safari that led to incorrect rendering.
diff --git a/src/app/styles/vars.css.ts b/src/app/styles/vars.css.ts
@@ -444,14 +444,14 @@ createGlobalTheme(':root', spaceVars, {
 })
 
 export const viewportVars = {
-  'max-480px': 'screen and (width <= 480px)',
-  'min-480px': 'screen and (width > 480px)',
-  'max-720px': 'screen and (width <= 720px)',
-  'min-720px': 'screen and (width > 720px)',
-  'max-1080px': 'screen and (width <= 1080px)',
-  'min-1080px': 'screen and (width > 1080px)',
-  'max-1280px': 'screen and (width <= 1280px)',
-  'min-1280px': 'screen and (width > 1280px)',
+  'max-480px': 'screen and (max-width: 480px)',
+  'min-480px': 'screen and (min-width: 481px)',
+  'max-720px': 'screen and (max-width: 720px)',
+  'min-720px': 'screen and (min-width: 721px)',
+  'max-1080px': 'screen and (max-width: 1080px)',
+  'min-1080px': 'screen and (min-width: 1081px)',
+  'max-1280px': 'screen and (max-width: 1280px)',
+  'min-1280px': 'screen and (min-width: 1281px)',
 }
 
 export const zIndexVars = createGlobalThemeContract(