Very nice video by Sam Selikoff in which he sets up a web manifest to make his site feel more app-like. Great production quality.
There are some tweaks I’d suggest though:
-
Fixate the header usingUpdate: See note belowposition: sticky;instead ofposition: fixed;. No need for that extramarginon the content then. -
Don’t set the header
heightto a fixed number, as not all devices have (equally sized) notches. Use the User Agent Variablesafe-area-inset-topinstead, and apply it as the top padding:header { padding-top: env(safe-area-inset-top); } -
Don’t disable scaling in case your app does not follow the system font sizing — which it does not by default. To make it do follow the system font sizing, use this snippet:
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }💡 You can still override the
font-familyafter that. That way you can have your custom font and also follow the preferred system Text Size
As an extra: to prevent that long-press behavior when the app is not added to the home screen, set -webkit-touch-callout: none; on the links.
On Twitter Sam pointed me out that when using position: sticky; there’s an issue with overscroll/bounce: The header will shift down along with the body as you do so.
In theory one could easily fix this by applying some overscroll-behavior on the body. However, as Safari does not support overscroll-behavior you’ll have to resort to a hack to prevent overscrolling in Safari. But, as that hack relies on 100vh — which Safari also doesn’t understand properly — you’ll have to use another hack to make Safari use the correct value for 100vh.
(* mumbles something about Safari being the new IE6 *)
Thank me with a coffee.
I don\'t do this for profit but a small one-time donation would surely put a smile on my face. Thanks!
To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.