Incorrect height, but after resize viewport it work.
See original GitHub issueHello! 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:
- Created 2 years ago
- Comments:11 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
I added imagesloaded before barbajs, locomotive-scroll.min.js, gsap.min.js and ScrollTrigger.min.js and added this in my script:
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.