Skip to content

Comments

Fix item jumps in masonry layout#2108

Open
j0sip wants to merge 2 commits intoShopify:mainfrom
j0sip:issue-2107-fix-masonry-column-jumpts
Open

Fix item jumps in masonry layout#2108
j0sip wants to merge 2 commits intoShopify:mainfrom
j0sip:issue-2107-fix-masonry-column-jumpts

Conversation

@j0sip
Copy link
Contributor

@j0sip j0sip commented Feb 20, 2026

Description

Fixes #2107

This PR prevents items from "jumping" between columns in the Masonry Layout when optimizedItemArrangement is enabled. It ensures that resizing an item doesn't disrupt the user's visual flow by locking the column positions.

Currently, when an item’s size changes, the Masonry algorithm recomputes the entire layout for all subsequent items. While this optimization helps fill gaps, it causes visible items to jump to different columns, causing a bad UX for end users.

To improve the UX, I've introduced a lastLockedItemIndex which is the index of last visible item. It ensures that all items up to that index retain their previously calculated column. Recomputation of columns would now only be allowed for items above that index (i.e. non-visible items), so the end user wouldn't notice it.

Reviewers’ hat-rack 🎩

  • [ ]

Screenshots or videos (if needed)

Tested in ComplexMasory in fixture app:
after

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.

Masonry items jump between columns upon size change

1 participant