Tonycre8 Posted July 28, 2021 Share Posted July 28, 2021 Hey forum. I've come across a little issue with my work on a mobile view, and I'm not sure how to go about dealing with it. Basically, I've got my home page animated with gsap, as well as a character that is animated within it's own component. When I try to focus on any of the areas on the contact form, it'll push the page up for the keyboard to have some room, and then it'll reset. You can see the effects in this video I recorded of the page on my phone. I've tried to make a sandbox replicating the code I have, which I'll link here as well.https://codesandbox.io/s/react-router-re-render-8btmz This piece has the same issue, it's just a simplified form of it. I just edited some old code that had scrolltrigger already set up. Any ways you think I can get rid of this issue in particular? Thanks Link to comment Share on other sites More sharing options...
Solution akapowl Posted July 28, 2021 Solution Share Posted July 28, 2021 Hey @Tonycre8 Someone experienced the same and asked about it just recently. Check out this thread and the suggested solution. Hope that helps you out, too. 4 Link to comment Share on other sites More sharing options...
Tonycre8 Posted July 29, 2021 Author Share Posted July 29, 2021 20 hours ago, akapowl said: Hey @Tonycre8 Someone experienced the same and asked about it just recently. Check out this thread and the suggested solution. Hope that helps you out, too. Thanks a tonne for this! Guess I wasn't Google searching hard enough. This seems to fix the issue. Although, it does seem to continue to offset the character, but I'm unsure that there's much I can really do about that, so it's going to have to do. Cheers! 1 Link to comment Share on other sites More sharing options...
akapowl Posted July 29, 2021 Share Posted July 29, 2021 Happy to point you in the right direction 4 hours ago, Tonycre8 said: Although, it does seem to continue to offset the character, but I'm unsure that there's much I can really do about that, so it's going to have to do. Well, it's pretty much impossible to say, what that is related to from just a video, but my guess would be that you are making use of vh-related units or have things based on the window's height for your character at some point (at least your sections appear to have a height of 100vh as I see in your codesandbox example)? vh-units are most often the cause of jumps when e.g. swiping on mobile and the browser's bars appear/disappear- because it resizes the window to a different size. In your case when the keyboard appears, the same happens - the window gets resized. And if you have things based on the window's height somewhere, it's likely, that things will just shift in relation to that. I'm not sure if there's much you could do about that in that case. 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