ScrollTrigger scrolling issue only on Google Chrome on Windows

[Vasyl Kril]

First, check screen vieo with this issue 

 

 

Scrolling was smooth but there was some waves or stucks. I don't know how to explain it on English but I hope, somebody understand me and help with this issue. 

 

I'm using ScrollTrigger for smooth scroll and helper function.

 

Maybe you will get me some advices about the smooth scrolling code. And thanks for your time:)

See the Pen NWjVOrG by vasylkril (@vasylkril) on CodePen

[nico fonseca]

Hi @Vasyl Kril welcome to the forum! 💚

I saw your video and I assume the problem is the blank space on the bottom, so I think this is because of your smooth scroll function and the full height calculation. One thing i see is that you have a lot of <img> tags, you need to set a hardcode height or a callback function when all images are loaded, because those might change the height of the page.

PS: And don't worry for the English 😉 

[GreenSock]

We'd love to help, @Vasyl Kril but you've got almost 5,000 lines of JS/CSS/HTML and several 3rd party libraries in there which we can't support. It's just way too much for us to dig into for these free forums. If you'd like some assistance, please isolate the issue in a minimal demo that only has the absolutely essential code - you don't even need to use your real artwork. Simple <div> elements are fine (or whatever). 

 

I definitely would NOT do this: 

$(window).scroll(function(){
  if ($(this).scrollTop() > 50) {
    $('.site-header').addClass('header-white');
  } else {
    $('.site-header').removeClass('header-white');
  }
});

That will perform terribly. It'd be much better to use a simple ScrollTrigger with toggleClass. 

 

It looks to me like you've got something in there that's causing the #page-scroll's clientHeight to be really really tall (when it shouldn't be). I'd focus your effort on that (or creating a minimal demo)