Problem with pin-spacer not recalculating when browser address bar pops in

[Jameshofton]

HI, 

 

thanks for any help in advance.  On mobile I am having trouble the pin-spacer wrapper not recalculating the height when the address bar comes on on when scroll.  I have a wrapper which has full height, then within that one div is 55% height and then other 45% high to make up 100% height.  

 

Here is the site in question

 

https://staging.oribiotech.com/data/

 

and here is a video of what is happening. 

 

https://staging.oribiotech.com/scrolling-problem.mp4

 

Should i set the scroll trigger to refresh the height when the address bar comes in. 

 

Any recommendations welcome. 

 

[mvaneijgen]

Hi @Jameshofton are you maybe using vh units? Are you aware of the other vh units out there that can fix this issue (svh)?

 

 

Also check out ScrollTrigger.normalizeScroll https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()/

Quote

If true, it'll force scrolling to be done on the JavaScript thread and prevent mobile browser address bars from showing/hiding. If false, it'll use native scrolling which is often handled on a separate thread and may cause repainting to be slightly out of sync. You can pass in a configuration object instead if you'd like to tweak the observer properties. For example { type: "touch,wheel,pointer" } would cause the page to be drag-scrollable with the mouse/pointer. See Observer docs for options (most callbacks are not available since they're used internally)

 

If that doesn't fix your issue can you please share a minimal demo of your setup (please don't include your whole project, just the relevant code, so that we can help you debug the issue)

 

Hope it helps and happy tweening! 

[Jameshofton]

Thanks for the fast reply.  Currently using height: 100%.  But i will check this out now and report back