Elements disappearing when scroll back to the top

[nicolasgermeaux]

Hello community 👋

Describe the bug On a personal project I noticed sometimes when we scroll back to the top, some elements on the header are disappearing. After a lot of researches I noticed the problem is also on the locomotive scroll website.

To Reproduce Steps to reproduce the behavior:

1. Go to https://locomotivemtl.github.io/locomotive-scroll/
2. Scroll to the bottom
3. Scroll back to the top
4. See the header's elements are missing

Expected behavior Here is an image showing before/after the problem :

BEFORE :

AFTER :

Desktop (please complete the following information):

• OS: MacOS BigSur 11.6
• Browser: Chrome (Only this one as far as I know), Safari and Firefox seems working
• Chrome Version: 95.0.4638.54

Can you tell me if you have already seen this? Thanks in advance for your help and great job with all the work you do! 👊

[gazjones00]

Duplicate of #353 - Chrome update compromising the viability of virtual scroll. There does appear to be a temporary fix referenced by @vitass.

Noticed the same a couple of days back - a temp fix would be to put a position: fixed on the wrapper. In case of the https://locomotive.ca/en would be to do it on [data-load-container].

[Hariswebdesign]

@Dushyant1295 , Thanks for solving my headaches.

[elliottmangham]

I noticed that there was no screen recording of the issue, so here is an example of the problem, for clarity: https://www.loom.com/share/76500d232aa64ea1ae98601663968677

Note in my case, adding the following fixes the issue whilst Google hopefully works on a solution:

html.has-scroll-smooth {
    backface-visibility: hidden;
    transform: translateZ(0);
}

[data-load-container] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
}

[TanimMahbub]

@elliottmangham Hi, I have been trying to solve the same issue for days now, now I'm here, but I have no idea how to use this solution, actually, this is my first time using this plugin, also I'm using gsap with scrollTrigger at same project, facing so many issues, solving them, struggling with them.

This issue was from the very beginning of the project and didn't find any solution until now, but I don't know how to apply it. So I was wondering if you could share the markup- the main scroller, sroll-section and how to wrap them with the [data-load-container] attribute, and the necessary css and js, that would be really life-saving for me.

Thank you all in advance.

[theMoeLafi]

not sure this is helpful, but i was having a similar issue and adding height: 100vh to the body tag sorted it out. I tried it on the locomotive website link you posted above and it also sorted it out on that site !

the alement which am assigning to el when am instantiating the scroll is a div that is a child of the body.

[elliottmangham]

@TanimMahbub thank you for your patience!

We use jQuery for most functionality, and GSAP for animations. Therefore, we do integrate ScrollTrigger with LocomotiveScroll.

Below is a paste of core/main JS file, which initializes LocomotiveScroll with ScrollTrigger, and fires custom functions if/when certain DOM elements exist or globally used ones. I realize things could be a lot more modular and cleaner, using ES and whatever else, but our set-up isn't in a place to change right now!

Javascript:

/****************************************************************************
* Theme scripts.
****************************************************************************/

/***************
* Smooth scroll
***************/

// Initiate smooth scroll
var scroll = new LocomotiveScroll( {
    el: document.querySelector( '[data-scroll-container]' ),
    smooth: true,
    getDirection: true
} );

// On scroll
scroll.on( 'scroll', ( instance ) => {

    // Sync positioning with GSAP ScrollTrigger
    ScrollTrigger.update();

    // Add direction to DOM
    document.documentElement.setAttribute( 'data-scrolling', instance.direction );

} );

// Tell ScrollTrigger to use these proxy methods
ScrollTrigger.scrollerProxy( '[data-scroll-container]', {
    scrollTop( value ) {
        return arguments.length ? scroll.scrollTo( value, 0, 0 ) : scroll.scroll.instance.scroll.y;
    },
    getBoundingClientRect() {
        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
    },
    pinType: document.querySelector( '[data-scroll-container]' ).style.transform ? "transform" : "fixed"
} );

// Set ScrollTrigger defaults
ScrollTrigger.defaults( {
    scroller: '[data-scroll-container]'
} );

// Store cursor position information
var currentMousePos = { x: -1, y: -1 };
$( document ).mousemove( function( event ) {
    currentMousePos.x = event.pageX;
    currentMousePos.y = event.pageY;
} );

/***************
* Transitions
***************/
// Set classes for document
document.documentElement.classList.add( 'is-loaded' );
document.documentElement.classList.remove( 'is-loading' );

setTimeout( () => {
    document.documentElement.classList.add( 'is-ready' );
}, 300 );

/***************
* Theme scripts
***************/
( function( $ ) {
    'use strict';

    setTimeout( () => {

        $( '.c-example' ).each( cExample );
        fnInViewDetection();
        fnPageTransition();
        oCursor();

    }, 1000 );

} )( jQuery );

/***************
* After theme scripts
***************/
// Each time the window updates, refresh ScrollTrigger and then update LocomotiveScroll
ScrollTrigger.addEventListener( 'refresh', () => scroll.update() );

// After everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();

// END OF DOCUMENT

HTML/PHP

<body>
    <div data-load-container>
        <div class="o-scroll" data-module-scroll="main" data-scroll-container>

            <section class="c-example1" data-scroll-section data-comp="example1">Example 1</section>

            <section class="c-example2" data-scroll-section data-comp="example2">Example 2</section>

        </div>
    </div>
</body>

I hope this helps you!

[TanimMahbub]

@elliottmangham Thank you so much for your help my friend, it will be a very big contribution to my learning. Wish you all the best

[LeonBaudouin]

I came across this bug with another virtual scroll package. I fixed it by setting the perspective of the scrolling container to an arbitrary value. Even perspective: 1px; seems to work.

[etienneclerc1997]

The most reliable way seems to add perspective: 1px; to either the data-scroll-container element or data-scroll-section elements. Adding it to data-scroll-section elements makes it so fixed elements can still function correctly inside the main scroll container.

[umairqazi523]

Adding perspective: 1px; to data-scroll-container fixed it for me.

[devmeraz87]

Adding perspective: 1px; to data-scroll-container fixed it for me.

thank you it work for me 🖤🖤

[sumimakito]

I came across this bug with another virtual scroll package. I fixed it by setting the perspective of the scrolling container to an arbitrary value. Even perspective: 1px; seems to work.

@LeonBaudouin Encountering a similar issue but not with locomotive. Your solution saved my day. Thank you!

[wneel]

This should be marked ad completed, the issue is not coming from locomotive-scroll @nicolasgermeaux