Form's iframe height is constantly recalculated

  • Profile Image
    Tyler Mumford
    Asked on October 14, 2016 at 01:06 PM

    In Safari for iOS 10, the form on our page constantly recalculates its iframe height, causing the bottom of the page to jiggle up and down. It has happened on multiple iPhones. It does not happen on iOS 9. It does not happen on other form pages on our site (such as https://www.suu.edu/testing-center/testing-intake.html).

    I connected Safari for Mac to my iPhone so I could try to debug the issue. As far as I can tell, it comes down to the condition check `window.parent != window` on line 3608 of jotform.forms.js (the `iframeHeightCaller` function). This condition shows that `window.parent` IS equal to `window` when the issue is expressed. I have no idea why this happens.

    Please look into this and let me know if I can help debug this further.

    Thank you,

    Tyler Mumford
    Southern Utah University

  • Profile Image
    ashwin_d
    Answered on October 14, 2016 at 03:47 PM

    Hello Tyler,

    I would suggest you to please embed your form using its iframe embed code excluding the script portion of iframe code. Please use the following iFrame embed code and see if that solves your problem: 

     <iframe id="JotFormIFrame-62356018251147" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62356018251147" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image
    webstudent_suu
    Answered on November 04, 2016 at 01:24 PM

    While that solution fixes the recalculating and jiggling, the form is now cut off. See https://www.suu.edu/graduatestudies/contact-test.html, and the screenshot below.

     

     

  • Profile Image
    Mike
    Answered on November 04, 2016 at 04:03 PM

    When you use the iFrame code without the script part, you can adjust the iFrame's height manually.

    <iframe id="JotFormIFrame-62356018251147" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62356018251147" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>

    If the standard Embed code is affected by jiggling issue too, you may also try a form source code.

  • Profile Image
    webstudent_suu
    Answered on January 13, 2017 at 12:38 PM

    Mike,

    Sorry for the long silence. Thank you for suggesting these possible workarounds. I do appreciate that you're trying to get our form working.

    But the root of the problems is that there's an issue with JotForm embeds on iOS. (Edit: the issue has occurred on multiple pages.) Using a different method to embed the form sidesteps the real problem, and in some cases, it undermines our entire reason for using JotForm.

    Is the development team aware of this issue? I'd be happy to submit any information or perform any tests necessary to get this issue resolved.

  • Profile Image
    BJoanna
    Answered on January 13, 2017 at 03:32 PM

    Unfortunately I do not have iPhone to test your embedded form, but I made several tests on different emulators, and  I was not able to replicate mentioned issue. I have also tested your form on my Samsung Galaxy S4 and form is working properly. I noticed that you form is still cut off. To resolve that issue please try to change the height of the form, like my colleague Mike suggested. 

    You can try to add "?nojump" code at the end of your src link in the embed code, to see if that will resolve jiggling issue.

    <iframe id="JotFormIFrame-62356018251147" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62356018251147?nojump" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>

    Also is the same thing happening on standalone form? 

    I have searched our forum, but I was not able to find same issue that you reported. 

     

  • Profile Image
    webstudent_suu
    Answered on January 13, 2017 at 05:52 PM

    This video shows the result of the bug:

     

    JotForm's JavaScript is resizing the iframe, and something is causing it to bounce back and forth between two values. I can add the ?nojump parameter if that would help you debug the issue, but the fact is that there's an issue, and we have too many forms to find and add ?nojump to them all.

    Edit: Here's the same bug expressed on a Mac:

    https://youtu.be/ev2Q-EuQMgw 

  • Profile Image
    ashwin_d
    Answered on January 14, 2017 at 03:06 AM

    Hello webstudent_suu,

    Can you please share the webpage URL where you are having this issue with?

    I did check both the webpage URL which you have shared earlier and both of them has form's script embed code. Please check the screenshot below:

    Screenshot For: https://www.suu.edu/testing-center/testing-intake.html

     

    Screenshot For:  https://www.suu.edu/graduatestudies/contact.html 

    Have you tried embedding form with iFrame embed code without script part as suggested by my colleague @BJoanna.

    Do try it out and get back to us if the issue persists.

    Thank you!

  • Profile Image
    Hue food tour 
    Answered on January 14, 2017 at 03:44 AM
  • Profile Image
    Mike
    Answered on January 14, 2017 at 05:25 AM

    When I check JS Embedded form at the next page using iOS 10 (simulator via browserstack) it does not  have jittering issue.

    https://www.suu.edu/testing-center/testing-intake.html

    Are you still able to reproduce it on iOS and Mac?

  • Profile Image
    webstudent_suu
    Answered on January 20, 2017 at 05:44 PM

    Yes, we are still able to reproduce the issue. Please have someone on the development team look into this.

    Pages with the issue:

    https://www.suu.edu/graduatestudies/contact.htmlhttps://www.suu.edu/parks/semester/apply.html 

    " rel="nofollow noopener">https:// 

  • Profile Image
    liyam
    Answered on January 21, 2017 at 01:39 AM

    This is a bit strange.

    So far I have tried with a number of browsers but I was not able to replicate the issue. But this may be an issue related to screen resolutions and browser types. Can you give us the version of the browser you're using and the screen resolution?

     

    Thanks.

  • Profile Image
    webstudent_suu
    Answered on January 23, 2017 at 10:49 AM

    On pages where this happens, it happens in Safari for iOS and Safari for Mac. We have not found that screen resolution has anything to do with it, but since you asked:

    iMac, built-in display at 2560x1440 and external display at 1920x1200
    iPhone 6 Plus and iPhone 7 Plus
    iPad (don't know the gen, but it has a Retina display)

  • Profile Image
    ashwin_d
    Answered on January 23, 2017 at 12:13 PM

    Hello,

    I did test your form on mac & Safari and it seems to work just fine. Please check the screenshot below:

     

    I will go ahead and test your webpage on a real iPad and get back to you if I am able to replicate the issue.

    Thank you!