From a539eab0b5efe37a7b008b8c9458ebf19028769d Mon Sep 17 00:00:00 2001 From: squidfunk Date: Sat, 15 Feb 2020 23:24:29 +0100 Subject: [PATCH] Fixed header shadow on older Safari --- src/assets/javascripts/observables/header/_/index.ts | 5 ++++- src/assets/stylesheets/layout/_base.scss | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/assets/javascripts/observables/header/_/index.ts b/src/assets/javascripts/observables/header/_/index.ts index 1ff275bce..9f207e1bb 100644 --- a/src/assets/javascripts/observables/header/_/index.ts +++ b/src/assets/javascripts/observables/header/_/index.ts @@ -52,7 +52,10 @@ export function watchHeader( el: HTMLElement ): Observable
{ const styles = getComputedStyle(el) - const sticky = styles.position === "sticky" + const sticky = [ + "sticky", /* Modern browsers */ + "-webkit-sticky" /* Old Safari */ + ].includes(styles.position) return of({ sticky, height: sticky ? el.offsetHeight : 0 diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss index 23759f89c..0bf2fac08 100644 --- a/src/assets/stylesheets/layout/_base.scss +++ b/src/assets/stylesheets/layout/_base.scss @@ -66,6 +66,7 @@ body { display: flex; position: relative; flex-direction: column; + width: 100%; min-height: 100%; // Hack: reset font-size to 10px, so the spacing for all inline elements is // correct again. Otherwise the spacing would be based on 20px.