What’s a safe way to measure DOM size without causing layout jank?

programming web dev
1

Hey folks, I’m wiring up a “sticky summary” panel and I’m trying to keep it aligned with a content column, but I’m seeing random scroll hitching and occasional 1px jumps when the page is busy (images loading, fonts swapping).

const el = document.querySelector('.summary');

function sync() {
  // seems to trigger layout + style recalcs at bad times
  const { width, left } = document
    .querySelector('.content')
    .getBoundingClientRect();

  el.style.width = `${width}px`;
  el.style.transform = `translateX(${left}px)`;
}

window.addEventListener('scroll', sync, { passive: true });
window.addEventListener('resize', sync);
new ResizeObserver(sync).observe(document.querySelector('.content'));

What’s the least risky pattern to keep this visually stable (and avoid forced reflow) when scroll/resize/RO callbacks can interleave and the layout is still settling?