ScrollSmoother in mobile safari issue

[Vasyl Shvets]

Hi everyone.  I don't write english very well so sorry for that.

 

To avoid hide / show address bar in mobile safari I use this in css:

body, html {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

#viewport {
  height: 100vh;
  width: 100vw;
  position: fixed;
  overflow-x: hidden;
  overflow-y: scroll;
}

 

It solves a lot of problems. For example:

    vh units (when adding 100vh),

    pinned blocks, 

    don't need to use ignoreMobileResize,

    the page does not jump, itc.

 

The page has totaly fixed position!

 

But I use ScrollSmoother, and I can't use body anymore. ScrollSmoother is calculating height and adding to the body. 

 

Maybe, can I tell ScrollSmoother to do his work not with body tag? 

Or can I fix this another way?

 

 

p.s I didn't add codepen example as it won't show the problem

 

[GSAP Helper]

Hi @Vasyl Shvets.

 

2 hours ago, Vasyl Shvets said:

p.s I didn't add codepen example as it won't show the problem

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Are you saying that you tried creating a CodePen but it all worked perfectly? It only breaks in your local setup?  

 

Please don't include your whole project in the minimal demo. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

 

PS I noticed there's no Club GreenSock membership associated with your account - how are you getting access to ScrollSmoother (it's a members-only benefit)? 

[Vasyl Shvets]

Hi. You won't see address bar in safari show / hide in codepen. In codepen is fixed. 

I explained my question very clearly above.

 

p.s. My company have membership.  And this is my private profile. So no worries

 

 

[Vasyl Shvets]

I just want to show address bar in safari all the time, no matter if I scroll down or up. And I know how to do it(my css above) But with ScrollSmoother i can't do it. As ScrollSmoother dealing with BODY

[Rodrigo]

Hi,

 

What you could try is add this to the ScrollSmoother configuration:

ScrollSmoother.create({
  smooth: 1,
  effects: true,
  normalizeScroll: true,
});

From the docs:

The normalizeScroll: true feature prevents [most] mobile browser address bars from hiding/showing (resizing the viewport), stops overscroll behavior, and solves multi-thread synchronization challenges!

 

If you keep having issues please remember to include a minimal demo.

Happy Tweening!