From e1554d95c02d6cb52489c887348ebe5b3bd1ef34 Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sat, 4 Apr 2026 12:36:08 +0200
Subject: [PATCH] [fix](trx-frontend-http): eliminate bookmark chip wobble by
 using compositor-friendly transforms

Batch offsetWidth reads before writes to prevent layout thrashing, and
position chips via transform instead of left to avoid sub-pixel jitter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend/trx-frontend-http/assets/web/app.js      | 8 +++++---
 .../trx-frontend/trx-frontend-http/assets/web/style.css   | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
index 525f8e5..0da8135 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
@@ -7507,7 +7507,6 @@ function createBookmarkChip(bm, colorMap, options = {}) {
   } else {
     // Keep main in-band bookmark chips pinned at the very top of the spectrum strip.
     span.style.top = "2px";
-    span.style.transform = "translateX(-50%)";
   }
   span.title = buildBookmarkTooltipText(bm) || (bm.name + " \u2014 " + freqStr + (bm.comment ? "\n" + bm.comment : ""));
   span.dataset.bmId = bm.id;
@@ -7607,14 +7606,17 @@ function updateBookmarkAxis(range) {
   const axisWidth = axisEl.clientWidth || 0;
   const edgePad = 8;
   const spans = axisEl.querySelectorAll(":scope > span");
+  // Batch all offsetWidth reads before any writes to avoid layout thrashing.
+  const widths = [];
+  for (let i = 0; i < spans.length; i++) widths.push(spans[i].offsetWidth || 0);
   visBookmarks.forEach((bm, i) => {
     const span = spans[i];
     if (!span) return;
     const frac = (bm.freq_hz - range.visLoHz) / range.visSpanHz;
     if (axisWidth > 0) {
-      const lw = span.offsetWidth || 0;
+      const lw = widths[i];
       const clamped = Math.max(edgePad + lw / 2, Math.min(axisWidth - edgePad - lw / 2, frac * axisWidth));
-      span.style.left = clamped + "px";
+      span.style.transform = `translateX(${clamped - lw / 2}px)`;
     } else {
       span.style.left = (frac * 100).toFixed(2) + "%";
     }
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index 178ca69..ba070b6 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -3474,8 +3474,9 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 }
 .spectrum-bookmark-chip {
   position: absolute;
-  transform: translateX(-50%);
   top: 2px;
+  left: 0;
+  will-change: transform;
   cursor: pointer;
   font-weight: 600;
   font-size: 0.66rem;