Incorrect height, but after resize viewport it work.

Hello! I have problem with height of scroll container. I used also scrollTrigger and BarbaJS, but I think is a Smoothscroll problem.

barba.hooks.after(() => {
    scroll.update();
  });

Do not solve my problem, because also without BarbaJs the footer and other content will cutted off.

For an old project I used this:

function locomotiveHeightBug(){
  scroll.update();
}
setInterval(locomotiveHeightBug, 5000);

It solve the problem but after 5 seconds, but sometimes the scroll jump. That’s so bad. Without that bad trick, when I refresh the page for the first time, and than resize the viewport, magically the scroll container give me the exact height.

Someone have the same problem? How to fix it? Thanks.

[AlexandraKlein]

I’m facing this in a NextJS app, but only on Android mobile browsers. It seems that the height is being incorrectly calculated when it’s initialized. The only solution I’ve found is so far is dispatching a resize event, like you did @francescocortese. Thanks for that!

The bug also seems to be related to setting image widths with CSS. If I remove Image CSS, I get a much more accurate height value. But this shouldn’t be the case. Nor should having to dispatch a resize event.

I vote to reopen this issue.

[francescocortese]

I added imagesloaded before barbajs, locomotive-scroll.min.js, gsap.min.js and ScrollTrigger.min.js and added this in my script:

    //Load first Allimages
    var currentScrollContainer =  document.querySelector("[data-scroll-container]");
    imagesLoaded(currentScrollContainer, { background: 'true' }, function () {
      //console.log('loaded');
    });
    // Set timeout for resie viewport.
    setTimeout(locomotiveHeightBug, 3500);
    function locomotiveHeightBug(){
      window.dispatchEvent(new Event('resize'));
    }
    scroll = new LocomotiveScroll({
      el: container.querySelector('[data-scroll-container]'),
      smooth: true,
      getDirection: true,
      //lerp: 0.05
    });

first load all the images, than after 3.5 sec simulate the viewport resize. This is better than scroll.update(); and scrollTrigger.update; When I used scroll.update(); and scrollTrigger.update; after the page start to jump on scroll.

I didn’t add CSS Changing for imagesLoaded.

I thinks is not a good solution but finally it work good, I think is a smoothScroll problem. I hope this can be helpful.