From a96f22cd67ff4fe1ce8d77071c257d116296f638 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 19 Oct 2022 12:07:44 -0400
Subject: [PATCH] FIX: Calculate header offset once on load (#18669)

Multiple things in the app need the height of the header to be correct (for example, scrolling to a post), so we need the header offset calculation. However, we shouldn't be calculating it on scroll, it's too resource intensive and it causes flickering on iPads (and possible other devices too).

This commit removes header offset calculation on scroll and adds a one-time calculation as soon as the header is first rendered. This ensures that users get scrolled to the correct post even if they open it in a new tab.
---
 .../discourse/app/components/site-header.js   | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index 0b902d2563..55ba73ad52 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -177,19 +177,6 @@ const SiteHeaderComponent = MountWidget.extend(
         this.docAt = header.offsetTop;
       }
 
-      const headerRect = header.getBoundingClientRect();
-      let headerOffsetCalc = headerRect.top + headerRect.height;
-
-      if (window.scrollY < 0) {
-        headerOffsetCalc += window.scrollY;
-      }
-
-      const newValue = `${headerOffsetCalc}px`;
-      if (newValue !== this.currentHeaderOffsetValue) {
-        this.currentHeaderOffsetValue = newValue;
-        document.documentElement.style.setProperty("--header-offset", newValue);
-      }
-
       const main = document.querySelector(".ember-application");
       const offsetTop = main ? main.offsetTop : 0;
       const offset = window.pageYOffset - offsetTop;
@@ -520,9 +507,17 @@ export default SiteHeaderComponent.extend({
   didInsertElement() {
     this._super(...arguments);
 
-    if ("ResizeObserver" in window) {
-      const header = document.querySelector(".d-header-wrap");
+    const header = document.querySelector(".d-header-wrap");
+    if (header) {
+      schedule("afterRender", () => {
+        document.documentElement.style.setProperty(
+          "--header-offset",
+          `${header.offsetHeight}px`
+        );
+      });
+    }
 
+    if ("ResizeObserver" in window) {
       this._resizeObserver = new ResizeObserver((entries) => {
         for (let entry of entries) {
           if (entry.contentRect) {