prefer-no-layout-sensitive-apis

Detects all layout sensitive APIs that may cause style recalculation.

Rationale

Accessing layout sensitive APIs may cause unnecessary synchronous style recalculation.

Examples

❌ Examples of incorrect code for this rule

el.offsetLeft += 10;

el.scrollTop = 0;

const { innerWidth: elemWidth } = elem;

const maxChildWidth = Array.from(el.children).reduce(
  (acc, { clientWidth }) => Math.max(acc, clientWidth),
  0
);

document.getElementById('foo').innerText = 'bar';

const orientation = el.clientHeight > el.clientWidth ? 'portrait' : 'landscape';

const { x, y, width, height } = el.getBoundingClientRect();

el.scrollIntoView();

function isElementInViewport(elem: HTMLElement): boolean {
  const rect = elem.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

if (!isElementInViewport(el)) {
  el.scrollIntoView();
  (el.firstChild as HTMLInputElement).focus();
}

✅ Examples of correct code for this rule

const el = document.getElementById('myEl');
el.addEventListener('click', () => {
  console.log('element clicked');
});