benrbnt Posted January 24, 2021 Share Posted January 24, 2021 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 More sharing options...
ZachSaucier Posted January 25, 2021 Share Posted January 25, 2021 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 More sharing options...
adamatronix Posted September 9, 2022 Share Posted September 9, 2022 Is doing 100% possible if using something like smooth scroller? Link to comment Share on other sites More sharing options...
Cassie Posted September 9, 2022 Share Posted September 9, 2022 Sorry Adam I'm not following. What was your question? Link to comment Share on other sites More sharing options...
adamatronix Posted September 10, 2022 Share Posted September 10, 2022 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. Link to comment Share on other sites More sharing options...
Cassie Posted September 10, 2022 Share Posted September 10, 2022 You can certainly make elements 100% of the viewport height while using scrollSmoother Link to comment Share on other sites More sharing options...
Cassie Posted September 10, 2022 Share Posted September 10, 2022 Maybe this is what you're after? Link to comment Share on other sites More sharing options...
adamatronix Posted September 10, 2022 Share Posted September 10, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now