Handling Sticky Elements

Learn how to handle pages that have sticky elements during visual testing

As part of stabilising the webpage to ensure consistency across snapshots, Percy handles sticky elements by showing them only once per screenshot.

To enable this behaviour Percy modifies the positions of sticky elements in the DOM before taking the screenshot.

Why Percy makes sticky element static in screenshot?

Percy visualise full page screenshots to be taken at the state when the webpage was open in browser. In that state, fixed or static positioned elements will only be present once i.e. at the top of the webpage and rest of webpage will be without the sticky elements.

Example

In the below video, the navigation bar at top and cookie banner at bottom of page are the sticky element. They remain fixed throughout the DOM height.

However, in Percy screenshot we will show navigation bar and cookie banner at the top only and would not repeat those elements in the rest of the DOM snapshot.

What changes in DOM while rendering?

As we modify the sticky elements, the stacking context changes for the children elements. For example, if there is an absolute positioned element inside a sticky element, it will be positioned with respect to parent of sticky element.