Skip to main content

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');
});