I am creating a SvelteKit website and i am running into some issues with layout shifting on safari. I have a component which contains a header. The component contains some js to track if the user is scrolling up or down, if the user is scrolling down the header dissapears and if they are scrolling up it reappears. This effect only takes place on screens with a smaller size than 950px.
This works fine on chrome but on safari this causes the viewport to shift up by 84px (height of the header) whenever the header isn't rendered. I believed this to be caused by differences in how browsers handle screen allocation for sticky elements. As such i hardcoded a div with the same size as the header and rendered it at the top of the page whenever the header was not shown. This did not fix the issue.
Does anyone know what is causing this behavior on safari?
(Behavior appears to be the same for both phone and pc versions of safari)
Code
<script lang="ts"> import { fly } from 'svelte/transition'; let lastScrollPosition = 0 let y: number; let scrollPositions: Array<number>; // Returns true if scrolling up and false if scrolling down function scrolling() { scrollPositions = [lastScrollPosition, y] lastScrollPosition = y if (scrollPositions[0] < scrollPositions[1] && y > 300) { return false } return true } let width: number; let scrollingValue: boolean = true; function setScroll() { if(width <= 950) { scrollingValue = scrolling() } }</script><svelte:window bind:innerWidth={width} bind:scrollY={y} on:scroll={setScroll} />{#if scrollingValue}<header transition:fly={{ y: -84, duration: 400 }}>...</header>{/if}<style> header { background-color: #fefefe; top: 0; position: sticky; padding: 1em 0; box-shadow: 0 0 3px var(--gray-90); z-index: 9999; }</style>Attempted solution
{#if !scrollingValue}<div style="height: 84px; width: 100%;"></div>{/if}