Form's iframe height is constantly recalculated

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

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" onDISABLEDload="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!

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.

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

<iframe id="JotFormIFrame-62356018251147" onDISABLEDload="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.

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.

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" onDISABLEDload="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. 

This video shows the result of the bug:

http://www.youtube.com/watch?v=TaUWQQJmDKI

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:

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!

http://tasteofhue.com/

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?

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.html, https://www.suu.edu/parks/semester/apply.html 

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.

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)

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!