question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Incorrect height, but after resize viewport it work.

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:11 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
AlexandraKleincommented, Dec 13, 2022

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.

1reaction
francescocortesecommented, Oct 30, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

jquery - why is $(window).height() so wrong? - Stack Overflow
But I'm getting values that are way too low. When the viewport is around 850px tall, I'm getting values around 350 or 400px...
Read more >
Responsive Height Design - Ahmad Shadeed
Resizing the browser (vertically) is not the only way to change the viewport height. ... But, what about different viewport heights?
Read more >
Viewport meta tag - HTML: HyperText Markup Language | MDN
This article describes how to use the "viewport" tag to control the viewport's size and shape.
Read more >
Developing responsive layouts with React Hooks
But there is a big problem when the window is resized the width value ... it to the current window height const [height,...
Read more >
Setting Height And Width On Images Is Important Again
Fixing The Resizing Problem # · height is set on the element in HTML · width is set on the element in HTML...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found