Fixed incorrectly computed header height when using instant loading

material/base.html

@@ -214,7 +214,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.52fb055a.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.6e54b5cd.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/components/header/_/index.ts

@@ -58,7 +58,6 @@ import { Main } from "../../main"
  */
 export interface Header {
   height: number                       /* Header visible height */
-  sticky: boolean                      /* Header stickyness */
   hidden: boolean                      /* Header is hidden */
 }
 
@@ -143,22 +142,16 @@ function isHidden({ viewport$ }: WatchOptions): Observable<boolean> {
 export function watchHeader(
   el: HTMLElement, options: WatchOptions
 ): Observable<Header> {
-  return defer(() => {
+  return defer(() => combineLatest([
-    const styles = getComputedStyle(el)
+    watchElementSize(el),
-    return of(
+    isHidden(options)
-      styles.position === "sticky" ||
+  ]))
-      styles.position === "-webkit-sticky"
-    )
-  })
     .pipe(
-      combineLatestWith(watchElementSize(el), isHidden(options)),
+      map(([{ height }, hidden]) => ({
-      map(([sticky, { height }, hidden]) => ({
+        height,
-        height: sticky ? height : 0,
-        sticky,
         hidden
       })),
       distinctUntilChanged((a, b) => (
-        a.sticky === b.sticky &&
         a.height === b.height &&
         a.hidden === b.hidden
       )),