Weird scrolling bug

Question

I'm not quite sure exactly where this bug is coming from, but when I scroll through my site quickly it has some issues of elements either loading in late or the footer showing through. I've tried to replicate this on my webflow preview site and it doesn't happen there. Does anyone have any ideas what this might be caused by? Video attached after the links

https://liquifytesting.webflow.io/

https://x0ryagx34p74stw1-71191494959.shopifypreview.com

jonas.halbstark · Answer

Hi @fergie77, thats a strange behaviour. Can you try setting a demsion for the instagram images? for example the aspect ratio to 1:1?

fergie77 · Answer

I'll give that a go! Any idea why the footer might be showing through from the background?

fergie77 · Answer

It's almost like each section is rendering as it's scrolled into

jonas.halbstark · Answer

The footer seems to be sticky.. So he is always in the canvas.

jonas.halbstark · Answer

Looks very nice by the way! 🙂

fergie77 · Answer

Yea that's true, but I'm not getting the flickering on the webflow version

fergie77 · Answer

Thank you! I'm pretty happy with how it's turned out

jonas.halbstark · Answer

yes strange. Never had this behaviour

fergie77 · Answer

Okay as long as it's not an issue specific to shopify that you've encountered before. I'll do some digging online!

fergie77 · Answer

So just checked the aspect ratio and it's already set to 1

fergie77 · Answer

The scrolling bug I've been able to fix by adding will-change:transform to the main-wrapper. Heard that's not amazing for performance so not ideal, but it works at least

jonas.halbstark · Answer

Thanks for the Update!

fergie77 · Answer

Should also note in case anyone else comes across it. I set the images to have an img_url filter and it solved the rendering issue

Welcome to the Liquify Community

Weird scrolling bug