Body doesn't resize correctly

[crissrocca]

Hello 👋

Describe the bug "locomotive": "locomotive-scroll 4.1.4", "plus": "Bootstrap 5", "ACF - Advanced Custom Fields, "Swipper", "jQuery" latest version.

After the loader, the page doesn't correctly calculate the full height. Some images (normal, carousel gallery or slider) take time to load and that means that the total height is not calculated by Locomotive.

Other problems also appear if some elements have a css animate fade-in/fade-out applied to the loaded in-view. Or if I use it in combination with libraries like AOS (Animate on scroll library). I have disabled this (css fade-in, AOS, etc..) for now, to focus on the main problem: total height calculation on load and smooth the body correctly.

To Reproduce video KO with error and video OK when performing a resize: https://we.tl/t-AemuaSv9eR

Expected behavior This happens using smooth: true, of course. A currently used patch is imagesloaded, calculating all loaded images and performing an update.

const imagesLoaded = require("imagesloaded"); // import the library or can use cdn
const loader = document.getElementById("loading");
const add_class_images_loaded = () => loader.classList.add("d-none");

imagesLoaded( document.querySelector('body'), function( instance ) {
  console.log('all images are loaded');
  scroller.update(); // recall locomotive scroll
  add_class_images_loaded();
});

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• Tested iOS
• Chrome, Moz, Safari.

Thank you 👊

[DavidKabelitz]

Same issue here

[stuartcusackie]

Same issue. Possibly down to Swiper.js, which I am also using.

As a temporary fix, I am having some success with setting timeouts to give the other JS packages time to calculate - A delay of 500ms before creating the locomotive AND calling each update() seems to fix everything.

[crissrocca]

Same issue. Possibly down to Swiper.js, which I am also using.

As a temporary fix, I am having some success with setting timeouts to give the other JS packages time to calculate - A delay of 500ms before creating the locomotive AND calling each update() seems to fix everything.

Yes, that can be a temporary solution. setTimeout(function(){ scroller.update(); console.log('update scroller') }, 5000);

It is also possible to call the trigger with GSAP scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.addEventListener("refresh", () => scroller.update()); ScrollTrigger.refresh();

But I don't know if it's the best to fix this :(