GSAP Smooth scroll can't get correct body height because of text

[Tee 3 Likes (Newbie)]

I'm currently trying to implement a smooth scroll just like @OSUblake's smooth scroll. 

 

 

As for my content I solely have some images and some text. These images and texts are being fetched asynchronously, as soon as the data is set I try to resize the body to make the smooth scroll work for all of its content:

doResize() {
    this.scroller.scrollRequest++;
    this.requestId = null;
    this.scroller.resizeRequest = 1;
    this.requestId = requestAnimationFrame(this.updateScroller.bind(this));
}

 

This works fine. But somehow the text is still causing some minor height problems, not much but there's still some inset not showing all of the body's content - not always, but moste of the times. Removing the text solves the problem, but that's obviously not an option. 

 

My text component:

<div class="row m-0">
  <div class="col p-0">
    <h1 class="title-container">
      {{title}}
    </h1>
  </div>
  <div class="col p-0">
    <p>{{text}}</p>
  </div>
</div>

Removing p solves the problem.

 

Calling doResize() after a few second does also help, but I want it to have the correct height from the very start. 

BTW changing p's line height etc. does also affect the inset's size hiding some content.

 

Any suggestion how to prevent this from happening? 

 

EDIT: After removing the custom font, everything works as well - how so? 

See the Pen MWwbmMV by magiix (@magiix) on CodePen

[ZachSaucier 7,132 Likes (Superhero)]

Hey Tee and welcome.

 

It's pretty hard for us to help without seeing the issue ourselves. Can you please create a minimal demo of the issue and share it with us so that we can take a look? For more information see this post:

 

[Tee 3 Likes (Newbie)]

5 minutes ago, ZachSaucier said:

Hey Tee and welcome.

 

It's pretty hard for us to help without seeing the issue ourselves. Can you please create a minimal demo of the issue and share it with us so that we can take a look? For more information see this post:

 

I reckon I did - as far as I know.

[ZachSaucier 7,132 Likes (Superhero)]

Just now, Tee said:

I reckon I did - as far as I know.

It looks like you linked the original pen, which has no text. Please click "Fork" on it in the bottom right and then edit it to recreate the error that you are describing.

[ZachSaucier 7,132 Likes (Superhero)]

10 minutes ago, Tee said:

After removing the custom font, everything works as well - how so? 

That's likely because it takes times for the font to load, which changes the size of the page when it renders. So you should wait to call the resize function until after the font has loaded.

[Tee 3 Likes (Newbie)]

1 minute ago, ZachSaucier said:

That's likely because it takes times for the font to load, which changes the size of the page when it renders. So you should wait to call the resize function until after the font has loaded.

The font is local, how do I know when it's loaded? Additionally I've never had this problem before, and I've used custom fonts and smooth scroll before. 

[ZachSaucier 7,132 Likes (Superhero)]

Just now, Tee said:

The font is local, how do I know when it's loaded?

Even if it's local, it takes time for it to load for the page most likely. See https://stackoverflow.com/a/32292880/2065702 for more info on detecting if it's loaded.

 

It could be a different issue, but my guess is that it's related to the font loading at this point. 

[Tee 3 Likes (Newbie)]

51 minutes ago, ZachSaucier said:

Even if it's local, it takes time for it to load for the page most likely. See https://stackoverflow.com/a/32292880/2065702 for more info on detecting if it's loaded.

 

It could be a different issue, but my guess is that it's related to the font loading at this point. 

I was able to fix the issue by adding 'sans-serif' to the font-family.. it's crazy.