diff --git a/.changeset/tough-walls-accept.md b/.changeset/tough-walls-accept.md new file mode 100644 index 000000000..17dca25ee --- /dev/null +++ b/.changeset/tough-walls-accept.md @@ -0,0 +1,5 @@ +--- +'@tanstack/virtual-core': patch +--- + +fix(virtual-core): prevent measurement jitter when scale is applied diff --git a/packages/virtual-core/src/index.ts b/packages/virtual-core/src/index.ts index 3a0c4460f..6aad9d6d1 100644 --- a/packages/virtual-core/src/index.ts +++ b/packages/virtual-core/src/index.ts @@ -44,6 +44,11 @@ export interface Rect { // +const getRect = (element: HTMLElement): Rect => { + const { offsetWidth, offsetHeight } = element + return { width: offsetWidth, height: offsetHeight } +} + export const defaultKeyExtractor = (index: number) => index export const defaultRangeExtractor = (range: Range) => { @@ -77,7 +82,7 @@ export const observeElementRect = ( cb({ width: Math.round(width), height: Math.round(height) }) } - handler(element.getBoundingClientRect()) + handler(getRect(element as unknown as HTMLElement)) if (!targetWindow.ResizeObserver) { return () => {} @@ -93,7 +98,7 @@ export const observeElementRect = ( return } } - handler(element.getBoundingClientRect()) + handler(getRect(element as unknown as HTMLElement)) } instance.options.useAnimationFrameWithResizeObserver @@ -251,11 +256,10 @@ export const measureElement = ( return size } } - return Math.round( - element.getBoundingClientRect()[ - instance.options.horizontal ? 'width' : 'height' - ], - ) + + return (element as unknown as HTMLElement)[ + instance.options.horizontal ? 'offsetWidth' : 'offsetHeight' + ] } export const windowScroll = (