Beta 2 - Masonry Row Jumps Back To Top of Row When Scrolling

Beta
#1

Hi Charlie,

I am using the new masonry settings on a row for the first time. it looks great, but there appears to be a scrolling issue on the front end. When I start to scroll and the top of the row/section leaves the viewport, the screen jumps back to the top of the masonry row.

You can see a screenshot video via this link: https://we.tl/t-o09yjuHD3f

Additionally, the same masonry grid has a modal linked to it, to show a slideshow / larger version of the image. It is an exact copy of an identical structure I am using on another website, which works well. However, in this case, when an image is clicked it is going to slide #1, rather than the correct slide, despite the data-x-slide-goto being correctly set to the looper’s index - exactly as it is in the other website where the correct slide is displayed.

2025-01-27_12-02-43

Thanks,
Christopher

#2

Is there a way to turn off litespeed cache on that site to see if something in their JS was causing the issue?

#3

Sure thing. It is a plugin and I have just disabled it.

#4

I have the same problem, but only when logged out
When I turn off Masonry on the row, all works again

I hope this can get resolved soon

#5

I see the issue now, something to do with effects. I’ll have a fix in beta3. Thanks for the examples, have a great day.

2 Likes
#6

Wonderfiul @charlie

Thanks for getting to the bottom of this

1 Like
#7

Thanks Charlie. Glad you have spotted the trouble.

1 Like
Masonry layout change is choppy and columns overlap
#8

Hi everyone,

Here’s an example of overlapping images at various screen sizes when using the Masonry feature in the Row element. Watch the video here.

It occurs at some breakpoints, when there is a mix of landscape and portrait images in the gallery. Here is the real page link to check it on a mobile device.

#9

In your case, does setting a higher “Stagger” value fix your issue? I think because your images are webp and without a width and height setting, the masonry library might not know how large your brick is. Let me know if that helps.

image

#10

Hi @charlie,

Unfortunately, no. On mobile, in horizontal layout, the problem still persists. I have tested even higher values for Stagger than in your screenshot.

#11

Are you using a plugin for those webp images? I have a feeling because there is no width or height on the images and because they are lazy loaded images, it’s causing the brick calculations to be off. If it’s an option for you to not lazy load the images, I can help you out there. If not I might have to play around with a masonry layout similar to yours.