From 1ec5a57ad9854b524ca292e2168b93dd0089fe5c Mon Sep 17 00:00:00 2001 From: Joie Date: Fri, 2 May 2025 23:50:05 +0800 Subject: [PATCH 1/5] fix: prevent measurement jitter when scale is applied --- packages/virtual-core/src/index.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/virtual-core/src/index.ts b/packages/virtual-core/src/index.ts index 3a0c4460f..56bdd5bec 100644 --- a/packages/virtual-core/src/index.ts +++ b/packages/virtual-core/src/index.ts @@ -251,11 +251,8 @@ 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 = ( From 8da66fd3e6f042deb766273ab959c8336ad79726 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 5 May 2025 06:52:13 +0000 Subject: [PATCH 2/5] ci: apply automated fixes --- packages/virtual-core/src/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/virtual-core/src/index.ts b/packages/virtual-core/src/index.ts index 56bdd5bec..49f0cd8fe 100644 --- a/packages/virtual-core/src/index.ts +++ b/packages/virtual-core/src/index.ts @@ -252,7 +252,9 @@ export const measureElement = ( } } - return (element as unknown as HTMLElement)[instance.options.horizontal ? 'offsetWidth' : 'offsetHeight'] + return (element as unknown as HTMLElement)[ + instance.options.horizontal ? 'offsetWidth' : 'offsetHeight' + ] } export const windowScroll = ( From 4aed82ffa2ca3cd819ec66b20b35bd00b12a749f Mon Sep 17 00:00:00 2001 From: Damian Pieczynski Date: Mon, 5 May 2025 08:54:02 +0200 Subject: [PATCH 3/5] Create tough-walls-accept.md --- .changeset/tough-walls-accept.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tough-walls-accept.md 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 From e1d4cf93f02526d0956db93d28583cc10d302f55 Mon Sep 17 00:00:00 2001 From: Joie Date: Mon, 5 May 2025 22:33:49 +0800 Subject: [PATCH 4/5] fix: replace `getBoundingClientRect()` with `offset*` in observeElementRect --- packages/virtual-core/src/index.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/virtual-core/src/index.ts b/packages/virtual-core/src/index.ts index 49f0cd8fe..b75a77ea3 100644 --- a/packages/virtual-core/src/index.ts +++ b/packages/virtual-core/src/index.ts @@ -42,6 +42,11 @@ export interface Rect { height: number } +const getRect = (element: HTMLElement): Rect => { + const { offsetWidth, offsetHeight } = element + return { width: offsetWidth, height: offsetHeight } +} + // export const defaultKeyExtractor = (index: number) => index @@ -74,10 +79,10 @@ export const observeElementRect = ( const handler = (rect: Rect) => { const { width, height } = rect - cb({ width: Math.round(width), height: Math.round(height) }) + cb({ width, 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 From 4cb29f89141a92c606792e0e90f9ff17d8d38e81 Mon Sep 17 00:00:00 2001 From: Joie Date: Mon, 5 May 2025 23:00:06 +0800 Subject: [PATCH 5/5] fix: make sure to round the values for `borderBoxSize` to avoid fractional dimensions --- packages/virtual-core/src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/virtual-core/src/index.ts b/packages/virtual-core/src/index.ts index b75a77ea3..6aad9d6d1 100644 --- a/packages/virtual-core/src/index.ts +++ b/packages/virtual-core/src/index.ts @@ -42,13 +42,13 @@ export interface Rect { height: number } +// + 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) => { @@ -79,7 +79,7 @@ export const observeElementRect = ( const handler = (rect: Rect) => { const { width, height } = rect - cb({ width, height }) + cb({ width: Math.round(width), height: Math.round(height) }) } handler(getRect(element as unknown as HTMLElement))