Flickering on scroll

[nicolasgermeaux]

Hello 👋

Describe the bug I have a sort of flickering when I scroll on my websites using the loco scroll. I saw on the example website that there is also this problem but not as much as I have on my side.

Note : I don't notice this problem on Firefox.

Desktop (please complete the following information):

• OS: MacOS Monterey
• Browser Chrome, Safari
• Screen : 16inch MacBook Pro M1Max

Thank you 👊

[jusstes]

Faced a similar problem, but with one feature. Freezes like this only happen in power saving mode on my mac pro M1. When working without this mode, everything works smoothly. Problem determining this state as navigator.getBattery() is not supported in Safari

[RohanClaclaws]

 <div id="main" data-scroll>
        <div id="page1">
         //Content
        </div>

        <div id="page2">
         //Content
        </div>
</div>

JS CODE

const scroll = new LocomotiveScroll({ el: document.querySelector('#main'), smooth: true });

Its is flickering for the following css :

main{

overflow: hidden;
background:#1D1D1B;

}

page1{

height: 100%;
width: 100vw;

overflow: hidden; background-color: #C8C0B6;
}

page2{

width: 100%;
height: 100vh;
background-color: #C8C0B6;
margin-top: -2px;                    // Solution for Flickering Problem just add this

}

Just overflow lap the next frame with margin-top to -2, It will solve your problem

[j4kim]

I don't know if it's the same problem but I'm facing massive flickering on my site. Here is a screen capture: Enregistrement de l’écran 2024-04-01 à 16.24.04.webm

• Website preview: https://fetevi.ch/demo
• Source: https://github.com/j4kim/fetevi/tree/demo
• OS: macOS 14.1.1
• Machine: MacBook Air M1 2020
• Browser: Chrome Version 122.0.6261.129
• Loco version: 4.1.4

I've tried this solution and it seems to work but it's hacky and on an outdated version.

Update: migrated to v5 and no more flickering