Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

rahulXbrowserstack
Copy link
Contributor

@rahulXbrowserstack rahulXbrowserstack commented Aug 20, 2025

Preserve scroll location during DOM serialization

Problem

We currently don't preserve scroll positions when serializing DOM elements. This can lead to visual differences when capturing screenshots, as elements that were scrolled in the original page appear at their default scroll position (top/left) in the serialized version.

Solution

This PR introduces scroll state serialization functionality through the serializeScrollState function in transform-dom.js. The function:

  • Captures scrollTop and scrollLeft values from original DOM elements
  • Stores them as data-percy-scrolltop and data-percy-scrollleft attributes on cloned elements
  • Only sets attributes when scroll values are non-zero, keeping the DOM clean
  • Handles edge cases gracefully (null/undefined elements)
image


// We apply any element transformations here to avoid another treeWalk
applyElementTransformations(clone);
applyElementTransformations(clone, node);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change the order of params, it should be node, clone

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did the change

@rahulXbrowserstack rahulXbrowserstack requested review from prklm10 and a team August 22, 2025 06:41
Copy link
Contributor

@ninadbstack ninadbstack left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved with a minor comment

@rahulXbrowserstack rahulXbrowserstack merged commit 61fd2e9 into master Aug 22, 2025
55 of 58 checks passed
@rahulXbrowserstack rahulXbrowserstack deleted the serialize-scroll-location branch August 22, 2025 10:22
@khitrenovich
Copy link

This change broke ~1/4 of our screenshots. I think it at least deserves being mentioned in the release notes (and I'd argue it should not have been released as a patch version as well).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants