JotForm Embedded in Wix.com site won't scroll to the top on Next or TY page using iOS 10 device.

  • Profile Image
    Jaime Pirnie
    Asked on April 29, 2017 at 01:08 PM

    I have a page that I cannot get the form to scroll to the top of the page when they hit the next button or when the Thank You page shows.  I've searched the forums all over the place for various solutions and I cannot for the life of me get this to work on iOS devices.  It seems to work on Safari/Desktop machines but on iOS it seems to scroll DOWN to the footer for some reason.  

    Here is a link to one of my test forms that I'm playing with:

    https://www.jetjam.racing/reg-test

    Any help would be appreciated.

    Thank you,

    -Jaime

  • Profile Image
    Nik_C
    Answered on April 29, 2017 at 04:16 PM

    I tested your form on Desktop on Safari and as you said it worked fine, but I also tested on iPhone 6s (emulator) and I wasn't able to replicate this problem.

    On which iPhone did you test your website?

  • Profile Image
    Jaime Pirnie
    Answered on April 29, 2017 at 06:04 PM

    i see it working on the emulator but on my device it does not work as you showed. I'm on an iPhone 7 Plus and when you click the next buttons, it doesn't scroll to the top between pages nor does it scroll to the top on the Thank You page.  Can you try it on a real device?

    -Jaime

  • Profile Image
    Kevin_G
    Answered on April 29, 2017 at 11:25 PM

    I have tested your form and I noticed it works the same like my colleague's example, unfortunately, I have not an iPhone device, but will ask for someone with one to test your form and find if we could also replicate the same behavior. 

    In the meantime, I noticed your form has been embedded inside an iFrame, although your form already is embedded using the JotForm iFrame method, could be possible for you to try re-embedding your form directly using the iFrame code from JotForm? 

    If so, please do let us know how it goes. 

  • Profile Image
    Kevin_G
    Answered on April 29, 2017 at 11:41 PM

    Could you please try injecting this CSS code to your form and test the behavior while testing on an iPhone:

    html, body {

        height: 100%;

        overflow: auto;

        -webkit-overflow-scrolling: touch;

    }

    Related guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Do let us know how it goes. 

  • Profile Image
    jaime@pirnie.org
    Answered on May 03, 2017 at 12:11 PM

    I added this code to the CSS portion of the form and it did not make any difference.  It works fine on an iPhone 4 but on an iPhone 7 plus, it does not scroll to the top.  I highly suggest you try this on a real iPhone 7 plus and you will see the bug.  From what I read, scrolling was changed on the device so you may need to do some code changes to make this work on the newer iPhones.

    In the meantime, do you have any other suggestions?

  • Profile Image
    Kevin_G
    Answered on May 03, 2017 at 02:18 PM

    I have asked for someone using the iOS 10 version and we could replicate the issue using an iPhone 6, here's the test: 

    The issue seems to be related to the embed method as well as the iOS version, when I tested on a previous version the issue was not there. 

    I will forward this thread to our second level so our developers can investigate it, in the meantime, you could try using a different method, you could try directly with the iFrame code or using the source code of your form if you're allowed to use it on Wix. 

    We will let you know as soon as we receive any update about it. 

     

     

  • Profile Image
    jaime@pirnie.org
    Answered on May 03, 2017 at 02:39 PM

    Glad you were able to repro the problem.  The problem repros when I use just the url, if I paste in the iFrame code, or if I paste in all of the source code.  It works fine if I use the popup method (of course) because it's in a new window and not inside a frame on the Wix.com site.  I put the example above back to using the URL for your devs/tier 2 to look at.  Let me know if you have any questions.  Will you reply back to this thread when there is an update?

    Thank you,

    -Jaime

  • Profile Image
    Kevin_G
    Answered on May 03, 2017 at 04:14 PM

    I put the example above back to using the URL for your devs/tier 2 to look at.

    Did you do this change on the same link you shared above? https://www.jetjam.racing/reg-test

    I have just tested it and noticed the same still happens; however, this has been already escalated to our second level, we will reply back to you as soon as we receive any update about it.