[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>
This commit is contained in:
@@ -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) + "%";
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user