Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Recommended Posts

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

Link to comment
Share on other sites

  • benrbnt changed the title to ScrollTrigger - iOS Safari using 100vh pinned element cause overflow and misplacement

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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.