ESLint pluginRulesprefer-no-layout-sensitive-apisOn this pageprefer-no-layout-sensitive-apisDetects all layout sensitive APIs that may cause style recalculation.RationaleAccessing layout sensitive APIs may cause unnecessary synchronous style recalculation.Examples❌ Examples of incorrect code for this ruleel.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 ruleconst el = document.getElementById('myEl');el.addEventListener('click', () => { console.log('element clicked');});