locomotivemtl / locomotive-scroll

🛤 Detection of elements in viewport & smooth scrolling with parallax.
https://locomotivemtl.github.io/locomotive-scroll
MIT License
7.97k stars 1.12k forks source link

Elements don't load when scrolling up #514

Closed nina-alin closed 1 year ago

nina-alin commented 1 year ago

Hello 👋

Describe the bug I am using Locomotive Scroll in a Next Js 13 application. When I scroll down then scroll up, element are loading very slowly. They disappear for a bit, then appear again.

To Reproduce I tried to reproduce the issue in a Sandbox, but I couldn't achieve to reproduce it. I wonder if it's a performance issue. I will show you a screen record showing what is happening in my project.

Expected behavior When scrolling up, elements shouldn't disappear for a bit amount of time.

Screenshots

https://github.com/locomotivemtl/locomotive-scroll/assets/56309556/a8d1b71d-fff4-46e8-a45c-e13bbbf4683e

Desktop

nina-alin commented 1 year ago

Okay, I have some big news: as you can see in the final seconds of the video, I have a gallery of images at the top of my page. I was using the Image component from next/image. However, as I encountered another bug that had nothing to do with Locomotive Scroll, I replaced the Image component with an HTML img tag. Surprisingly, this fixed the issue!

As you can observe in the video, the elements that were not loading properly were an SVG and text. I am quite puzzled by this bug. It's difficult to comprehend how a component that is designed to optimize images could lead to such a strange behavior.

I didn't mention it in my original comment, but I attempted to remove the Locomotive Scroll implementation to see if the problem was caused by something else. Interestingly, everything worked fine after doing so.

I will keep this issue open, as there is certainly something worth investigating here. I'm not entirely certain whether the problem originates from Next.js or Locomotive Scroll. Depending on your response, I will consider opening an issue in the Next.js repository.

billydawsn commented 1 year ago

I had the same issue - @BleXor posted this solution on another issue and it resolved this one for me! [data-scroll-container], [data-scroll-section] { transform-style: preserve-3d; will-change: transform; }

nina-alin commented 1 year ago

Thank you for your reply! I'll close this issue.