teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: mobile header and footer prevent flicker on ios safari (#660)

Browse source
This commit is contained in:
Joel Drake 2022-12-30 15:06:48 +01:00 committed by GitHub
parent 13887a33da
commit 1bb8963d98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/main/MainContent.vue
View file

@ -8,9 +8,9 @@ defineProps<{
</script> </script>
<template> <template>
<div relative> <div relative mobile-padding-top sm:pt-0>
<div <div
sticky top-0 z10 fixed sm:sticky w-full top-0 z10
border="b base" bg-base border="b base" bg-base
> >
<div flex justify-between px5 py4> <div flex justify-between px5 py4>

4
layouts/default.vue
View file

@ -40,11 +40,11 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
</slot> </slot>
</div> </div>
</aside> </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> <div min-h="[calc(100vh-3.5rem)]" sm:min-h-screen>
<slot /> <slot />
</div> </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" /> <CommonOfflineChecker :small-screen="isHydrated.value" />
<NavBottom v-if="isHydrated.value" /> <NavBottom v-if="isHydrated.value" />
</div> </div>

2
unocss.config.ts
View file

@ -101,5 +101,7 @@ export default defineConfig({
return res return res
}], }],
['box-shadow-outline', { 'box-shadow': '0 0 0 1px var(--c-primary)' }], ['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
], ],
}) })