[Tracker] Use ResizeObserver instead of polling for document height (#6174)

* Use ResizeObserver instead of polling for document height

* fix: avoid forced reflow in getCurrentScrollDepthPx

window.scrollY and window.innerHeight are compositor-cached values
that never trigger layout recalculation, unlike el.scrollTop and
el.clientHeight. The fallbacks only existed for IE which is already
unsupported.

* disable engagement tracking in compat mode

* Add changelog entry

* Bump tracker script version

* Add COMPAT fallback for engagement tracking

* Fix lint

* Fix formatting issues

* fix: use hkps keyserver to avoid blocked port 80 in CI

* fix: fetch ClickHouse key via curl instead of keyserver

* chore: print PR labels in workflow for debugging

* Revert "chore: print PR labels in workflow for debugging"

This reverts commit 4fb22a7.

* Add tracker script changelog entry

Author: ukutaht

.github/workflows/tracker-script-update.yml

@@ -30,13 +30,12 @@ jobs:
 
       - name: Install jq and clickhouse-local
         run: |
-          sudo apt-get install apt-transport-https ca-certificates dirmngr
-          sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 8919F6BD2B48D754
-          echo "deb https://packages.clickhouse.com/deb stable main" | sudo tee \
-              /etc/apt/sources.list.d/clickhouse.list
+          curl -fsSL 'https://packages.clickhouse.com/rpm/lts/repodata/repomd.xml.key' \
+            | sudo gpg --batch --yes --dearmor -o /usr/share/keyrings/clickhouse-archive-keyring.gpg
+          echo "deb [signed-by=/usr/share/keyrings/clickhouse-archive-keyring.gpg] https://packages.clickhouse.com/deb stable main" \
+            | sudo tee /etc/apt/sources.list.d/clickhouse.list
           sudo apt-get update
-
-          sudo apt-get install jq clickhouse-server -y
+          sudo apt-get install -y jq clickhouse-server
 
       - name: Compare and increment tracker_script_version
         id: increment

CHANGELOG.md

@@ -27,6 +27,7 @@ All notable changes to this project will be documented in this file.
 - Moved graph interval picker, export button, imported data toggle and notices out of the graph and into a new options menu in the top bar
 - Standardised and improved segment and filter modals styling
 - Changed graph tooltip positioning logic: it now aligns to the top of the chart, to the right of the hovered data point
+- Use ResizeObserver instead of polling in tracker for scroll depth. Removes forced reflows caused by the tracker script.
 
 ### Fixed
 

tracker/npm_package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## [0.4.5] - 2026-05-05
+
+- Use ResizeObserver over polling for getting scroll metrics
+
 ## [0.4.4] - 2025-10-31
 
 - Convert all TypeScript definition comments from `//` style to JSDoc `/** */` style for better IDE integration and TypeScript tooling support

tracker/package.json

@@ -1,5 +1,5 @@
 {
-  "tracker_script_version": 33,
+  "tracker_script_version": 34,
   "type": "module",
   "scripts": {
     "lint": "eslint",

tracker/src/engagement.js

@@ -137,11 +137,21 @@ function getDocumentHeight() {
 }
 
 function getCurrentScrollDepthPx() {
-  var body = document.body || {}
-  var el = document.documentElement || {}
-  var viewportHeight = window.innerHeight || el.clientHeight || 0
-  var scrollTop = window.scrollY || el.scrollTop || body.scrollTop || 0
-
+  var viewportHeight, scrollTop
+  if (COMPILE_COMPAT) {
+    var el = document.documentElement || {}
+    var body = document.body || {}
+    viewportHeight = window.innerHeight || el.clientHeight || 0
+    scrollTop =
+      window.scrollY ||
+      window.pageYOffset ||
+      el.scrollTop ||
+      body.scrollTop ||
+      0
+  } else {
+    viewportHeight = window.innerHeight
+    scrollTop = window.scrollY
+  }
   return currentDocumentHeight <= viewportHeight
     ? currentDocumentHeight
     : scrollTop + viewportHeight
@@ -151,23 +161,22 @@ export function init() {
   currentDocumentHeight = getDocumentHeight()
   maxScrollDepthPx = getCurrentScrollDepthPx()
 
-  window.addEventListener('load', function () {
-    currentDocumentHeight = getDocumentHeight()
-
-    // Update the document height again after every 200ms during the
-    // next 3 seconds. This makes sure dynamically loaded content is
-    // also accounted for.
-    var count = 0
-    var interval = setInterval(function () {
+  if (COMPILE_COMPAT) {
+    window.addEventListener('load', function () {
       currentDocumentHeight = getDocumentHeight()
-      if (++count === 15) {
-        clearInterval(interval)
-      }
-    }, 200)
-  })
+      var count = 0
+      var interval = setInterval(function () {
+        currentDocumentHeight = getDocumentHeight()
+        if (++count === 15) clearInterval(interval)
+      }, 200)
+    })
+  } else {
+    new ResizeObserver(function () {
+      currentDocumentHeight = getDocumentHeight()
+    }).observe(document.documentElement)
+  }
 
   document.addEventListener('scroll', function () {
-    currentDocumentHeight = getDocumentHeight()
     var currentScrollDepthPx = getCurrentScrollDepthPx()
 
     if (currentScrollDepthPx > maxScrollDepthPx) {