Fixed position for controls ignored on mobile WebKit

[flaming-codes]

About

Due to Apple's implementation for input fields on mobile Safari, the position: fixed-property is ignored, which means the navigation bar doesn't stay fixed to the top.

We should discuss how to improve the UX here or simply ignore the issue for now.

Solution

A dirty hacky ugly POC of what could be done for mobile WebKit users only on focused input:

<script lang="ts">
  $: half = browser ? window.innerHeight * 0.5 : 0;
  $: top = y > half ? half : y;
</script>

<svelte:window bind:scrollY={y} />

<aside style="top: {top}px" ...>
 ...
</aside>

Basically we add a top-distance as long as hero is visible, then we keep the half distance for the rest of the page. It's hard to imagine anything close being actually usable, but it's a start.

Sources

More read: https://gist.github.com/avesus/957889b4941239490c6c441adbe32398