Jump to content
Search Community

Jumpy Behavior With Input Fields on Mobile Phone

ericnguyen23 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey @ericnguyen23,

 

I'm on Android phone right now and was not able to see any unexpected jumping around. What phone are you using? What browser? I'm on a Nokia running Firefox.

 

Do you have this issue if you open your example pen in 'Debug' mode? It will help us figure out if it's something to do with codePen.

 

Link to comment
Share on other sites

4 minutes ago, Dipscom said:

Hey @ericnguyen23,

 

I'm on Android phone right now and was not able to see any unexpected jumping around. What phone are you using? What browser? I'm on a Nokia running Firefox.

 

Do you have this issue if you open your example pen in 'Debug' mode? It will help us figure out if it's something to do with codePen.

 

 

I'm on s8 Plus, Chrome browser. 

 

Yes, same issues in debug view. Here's the debug link: https://s.codepen.io/ericnguyen23/debug/pozgdWz/jVApobzEWqZr

Link to comment
Share on other sites

1 minute ago, ericnguyen23 said:

Similar to what Pedro said, I can't reproduce any weird jumping on my Android. All I see is some built in zooming for the input which, if someone zooms out again, makes them have to scroll to the inputs again. Is this what you're talking about @ericnguyen23? Maybe you could take a screen capture of the effect that you're seeing?

Link to comment
Share on other sites

The issue will be most likely related to resize event triggered by the opened keyboard. 

 

ScrollMagic tries to recalculate the values to match with new viewport and scroll position. 

 

It won't happen on desktop as there is no keyboard showing over the site. 

 

Anyhow this issue if we can call it that way is related to the ScrollMagic and it is not really scope of this forum. 

 

Try to log out values of scroll position / time-line progress before and after to see how they are affected. 

 

Ps: I can replicate this only on first demo opened in separate window. Last demo does the zoom in as Zach described. 

  • Like 2
Link to comment
Share on other sites

Oh, look at this, it's a thread party! Whoop whoop whoop!

 

So, I see the zooming in on Chrome and agree that is a jarring experience. It makes me think you have forgotten to add the meta tags for the zooming and scaling of the document. In fact, checking your original link, I don't see any of the metatags.

 

If your are unfamiliar with codePen, press the settings button of your pen, look at the HTML tab and under the Stuff for <head> text area there's a button that says: "insert the most common viewport metatags". Click on that to add some common stuff, save your pen and check to see if that helps.

  • Like 3
Link to comment
Share on other sites

2 hours ago, Dipscom said:

Oh, look at this, it's a thread party! Whoop whoop whoop!

 

So, I see the zooming in on Chrome and agree that is a jarring experience. It makes me think you have forgotten to add the meta tags for the zooming and scaling of the document. In fact, checking your original link, I don't see any of the metatags.

 

If your are unfamiliar with codePen, press the settings button of your pen, look at the HTML tab and under the Stuff for <head> text area there's a button that says: "insert the most common viewport metatags". Click on that to add some common stuff, save your pen and check to see if that helps.

Thanks, I've added this and the jumpy/jittery behavior is still there.  Let me explain what I'm experiencing:

  1. When I click on the name input box, browser jumps to bottom section.
  2. As I continue to scroll up and down, I also experience jittery animations. This again, likely due to Scrollmagic, so I'll take a look at css solution @ZachSaucier mentioned above.
Link to comment
Share on other sites

Another option is not using ScrollMagic on small screens. Here's a thread from yesterday that shows how you can either enable/disable scenes or create/destroy the controller at certain widths. Maybe that'll give you some ideas too.

Happy tweening.

:)

 

  • Like 2
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.
×
×
  • Create New...