sjg/trx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[fix](trx-frontend-http): eliminate bookmark chip wobble by using compositor-friendly transforms

Browse Source 
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>
This commit is contained in:
Stan Grams
2026-04-04 12:36:08 +02:00
parent 13aceb35c6
commit e1554d95c0
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+5 -3
View File
@@ -7507,7 +7507,6 @@ function createBookmarkChip(bm, colorMap, options = {}) {
} else { } else {
// Keep main in-band bookmark chips pinned at the very top of the spectrum strip. // Keep main in-band bookmark chips pinned at the very top of the spectrum strip.
span.style.top = "2px"; span.style.top = "2px";
span.style.transform = "translateX(-50%)";
} }
span.title = buildBookmarkTooltipText(bm) || (bm.name + " \u2014 " + freqStr + (bm.comment ? "\n" + bm.comment : "")); span.title = buildBookmarkTooltipText(bm) || (bm.name + " \u2014 " + freqStr + (bm.comment ? "\n" + bm.comment : ""));
span.dataset.bmId = bm.id; span.dataset.bmId = bm.id;
@@ -7607,14 +7606,17 @@ function updateBookmarkAxis(range) {
const axisWidth = axisEl.clientWidth || 0; const axisWidth = axisEl.clientWidth || 0;
const edgePad = 8; const edgePad = 8;
const spans = axisEl.querySelectorAll(":scope > span"); 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) => { visBookmarks.forEach((bm, i) => {
const span = spans[i]; const span = spans[i];
if (!span) return; if (!span) return;
const frac = (bm.freq_hz - range.visLoHz) / range.visSpanHz; const frac = (bm.freq_hz - range.visLoHz) / range.visSpanHz;
if (axisWidth > 0) { 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)); 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 { } else {
span.style.left = (frac * 100).toFixed(2) + "%"; span.style.left = (frac * 100).toFixed(2) + "%";
} }
src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+2 -1
View File
@@ -3474,8 +3474,9 @@ button:focus-visible, input:focus-visible, select:focus-visible {
} }
.spectrum-bookmark-chip { .spectrum-bookmark-chip {
position: absolute; position: absolute;
transform: translateX(-50%);
top: 2px; top: 2px;
left: 0;
will-change: transform;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
font-size: 0.66rem; font-size: 0.66rem;