SelectionIndicator jumps when viewport scrolled down in Chrome

[filipw01]

Provide a general summary of the issue here

SelectionIndicator jumps when viewport scrolled down in Chrome, note that this works in both Firefox and Safari

CleanShot.2026-04-15.at.17.36.38.mp4

🤔 Expected Behavior?

SelectionIndicator transitions as expected like in any other case

😯 Current Behavior

SelectionIndicator jumps when viewport scrolled down in Chrome

🖥️ Steps to Reproduce

https://stackblitz.com/edit/vitejs-vite-rzswayxc?file=index.html

Then scroll down like in the video and select another tab

Version

1.17.0

What browsers are you seeing the problem on?

Chrome 147.0.7727.56

What operating system are you using?

MacOS

🧢 Your Company/Team

Motion

[LFDanLu]

It doesn't actually seem to only be tied to scroll positioning, but rather to the keyed <p> elements you are switching between when the selected tab changes. If you replace those with a single element, the issue seems to go away, but strangely enough even if both <p> elements are the same height the issue reproduces... It seems like

react-spectrum/packages/react-aria-components/src/SharedElementTransition.tsx

Lines 92 to 97 in 8ab651b

	if (property === 'translate') {
	let prevRect = prevSnapshot.rect;
	let currentItem = element.getBoundingClientRect();
	let deltaX = prevRect.left - currentItem?.left;
	let deltaY = prevRect.top - currentItem?.top;
	element.style.translate = `${deltaX}px ${deltaY}px`;

is calculating different top between the two, so it might be something with when we snapshot or something. Will need some additional investigation, seems non trivial.

In addition, I was able to reproduce this in our storybook with the same stackblitz setup in all browsers even without any scrolling being applied so there seems to be so additional factors at play here