Incorrect offset calculation for elements positioned with transform: translate() in scrollIntoView #7716

Provide a general summary of the issue here

Incorrect offset calculation when child elements are positioned with transform: translateY() or translateX().

🤔 Expected Behavior?

The function should return the correct offset even when the child element is positioned using CSS transform: translateY() or translateX().

😯 Current Behavior

The current function only considers offsetTop and offsetLeft, which do not account for elements transformed using translateY() or translateX(). This results in incorrect positioning calculations.

💁 Possible Solution

Use getBoundingClientRect() to calculate the relative offset instead of relying on offsetTop and offsetLeft.

🔦 Context

No response

🖥️ Steps to Reproduce

1. Create an element inside an ancestor with transform: translateY(100px);
2. Use the current function to compute its relative offset
3. Observe that the function does not account for the transformed position

Version

latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macos

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response