From ae4eca28c40950c0cec45459670eabfa4fe81b0b Mon Sep 17 00:00:00 2001 From: Vladyslav Dalechyn Date: Tue, 12 Mar 2024 22:10:40 +0200 Subject: [PATCH] fix: media queries `width <|>` to `max|min-width` (#133) --- .changeset/tricky-planes-bake.md | 5 +++++ src/app/styles/vars.css.ts | 16 ++++++++-------- 2 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 .changeset/tricky-planes-bake.md diff --git a/.changeset/tricky-planes-bake.md b/.changeset/tricky-planes-bake.md new file mode 100644 index 00000000..918c07bc --- /dev/null +++ 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 index 66854af3..6af1b327 100644 --- 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(