From 1bb8963d9879522d402474bfaa2c47b8597520d3 Mon Sep 17 00:00:00 2001
From: Joel Drake <joeldrak3@outlook.com>
Date: Fri, 30 Dec 2022 15:06:48 +0100
Subject: [PATCH] fix: mobile header and footer prevent flicker on ios safari
 (#660)

---
 components/main/MainContent.vue | 4 ++--
 layouts/default.vue             | 4 ++--
 unocss.config.ts                | 2 ++
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index ee6e1716..eec056c6 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -8,9 +8,9 @@ defineProps<{
 </script>
 
 <template>
-  <div relative>
+  <div relative mobile-padding-top sm:pt-0>
     <div
-      sticky top-0 z10
+      fixed sm:sticky w-full top-0 z10
       border="b base" bg-base
     >
       <div flex justify-between px5 py4>
diff --git a/layouts/default.vue b/layouts/default.vue
index 390b767b..bedf6e05 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -40,11 +40,11 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
           </slot>
         </div>
       </aside>
-      <div class="w-full min-h-screen" :class="wideLayout ? 'lg:w-full sm:w-600px' : 'sm:w-600px'" sm:border-l sm:border-r border-base>
+      <div class="w-full min-h-screen" :class="wideLayout ? 'lg:w-full sm:w-600px' : 'sm:w-600px'" sm:border-l sm:border-r border-base mobile-padding-bottom sm:pb-0>
         <div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
           <slot />
         </div>
-        <div sm:hidden sticky left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20">
+        <div sm:hidden fixed w-full left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20">
           <CommonOfflineChecker :small-screen="isHydrated.value" />
           <NavBottom v-if="isHydrated.value" />
         </div>
diff --git a/unocss.config.ts b/unocss.config.ts
index 0ee92d8c..533f2ed3 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -101,5 +101,7 @@ export default defineConfig({
       return res
     }],
     ['box-shadow-outline', { 'box-shadow': '0 0 0 1px var(--c-primary)' }],
+    ['mobile-padding-top', { 'padding-top': 'calc(4rem + 1px)' }], // in sm screen size header is fixed (instead of sticky) and parent have this padding, to prevent flickering in iOS Safari
+    ['mobile-padding-bottom', { 'padding-bottom': '3.5rem' }], // in sm screen size footer is fixed (instead of sticky) and parent have this padding, to prevent flickering in iOS Safari
   ],
 })