ScrollTrigger - iOS Safari using 100vh pinned element cause overflow and misplacement

[benrbnt]

Hello everyone,

 

Codesandbox Code: https://codesandbox.io/s/romantic-snow-gfq88?file=/src/index.js

Codesandbox Full Page preview: https://gfq88.csb.app/

(Can't reproduce on codepen, as it is a fixed height iframe...)

 

I would like to make a background element to be pinned through the content. But using iOS and a 100vh height, I have this problem:

 

First screen: While scrolling and having the navigation UI bar closed, the element is not full height

Second screen: same problem, even after reaching the trigger element end

Third screen: everything is fine if the navigation UI bar is open.

 

Edit: On the first screen, the problem of the "not full height"  seems to  occurs only cause of the "in-app" Telegram browser. On safari, it is real full height using 100vh.

 

 

Feel free to ask me any question if its not clear enough for you

 

Thanks for your help !

 

See the Pen rNMENoz by benjaminrobinet (@benjaminrobinet) on CodePen

[ZachSaucier]

Hey benrbnt and welcome to the GreenSock forums. Are you saying that this issue is caused by GSAP/ScrollTrigger?

 

100vh is natually problematic on mobile because of how mobile browsers change the height of the viewport due to the expanding and contracting UI elements. Often times people will change their layout to use percents (height: 100%) instead to try and avoid these types of issues. 

[adamatronix]

Is doing 100% possible if using something like smooth scroller?

[Cassie]

Sorry Adam I'm not following. What was your question?

[adamatronix]

To get an element 100% height to the mobile browsers bottom ui ( chrome ) usually requires the body/parent element to be 100%. Just wondering if it can be accomplished with scroll smoother as everything is in that large element. Not sure how would go about implementing that. I'll look into it.

[Cassie]

You can certainly make elements 100% of the viewport height while using scrollSmoother 

[Cassie]

Maybe this is what you're after?
 

 

[adamatronix]

Yes that helps. But also this: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ for anyone wondering. I'll probably need to refresh scrolltrigger after the vh is calculated.