Scrolling problem in iFrame embed on iOS products - iPad & iPhone.

kismef

Asked on June 27, 2016 at 5:10 AM

Hi,

I am having scrolling problem on iPad & iPhone with the iframe embed method. I have previously used the Embed method which works fine on desktop, but it does not appear on iOS mobile devices.

After searching through the forum, I found the suggestion of using iFrame embed method in my web design software - Adobe Muse. The form appears but it always scroll to the top when I try to scroll down.

You can take a look at the issue by loading the link below on an iPad. it is almost impossible to fill in the form with the scrolling keep jumping to the top or that you cannot scroll down. The only way you can scroll down is scrolling close the right side of the screen, which is counter-intuitive for a mobile device.

I know that this is an issue in iOS for iFrame. Are there any solutions around this?

Please advise.

Thanks.

Ken

Page URL: http://test.energeyes-eyewear.com/sg/tablet/product-register.html
Irshad

Replied on June 27, 2016 at 6:47 AM

Right now in the Iframe code, you have put scrolling = "no". Can you please try to put scrolling = "yes".

That is please try the below code of iframe :

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/61711659250454" frameborder="0" style="width:100%; height: 2060px; border:none;" scrolling="yes"></iframe>
kismef

Replied on June 27, 2016 at 9:45 PM

Hi,
Thanks for the info, but I tried, it is still the same. It workS if I use my finger and scroll on the side of the iPad or iPhone.
It does not scroll properly if I were to use my finger and scroll in the middle. It will scroll to the top again.
It is a known issue on iOS with iframe from what I gathered. I may have to link to the main form URL for the mobile version, instead if embedding in an iframe on my web pages.
...
Chriistian Jotform Support

Replied on June 27, 2016 at 11:40 PM

I tested your form on a iOS emulator and I was able to see the issue you were referring to. The form keeps scrolling to the top when I try to scroll down. Can you please try adding the ?nojump at the end of the form url to resolve the issue? You can use the iframe code below where I have added the ?nojump in the url.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/61711659250454?nojump" frameborder="0" style="width:100%; height: 2060px; border:none;" scrolling="yes"></iframe>

If the issue persists, please let us know.
kismef

Replied on June 30, 2016 at 11:45 AM

Hi,
Thanks for the response and the new code. However, it is still the same. It works fine if you scroll with your finger on the side but when you put your finger towards the centre and slightly off from the extreme right or left, it scrolls back up again.
If you try to input into the field with the iPad software keyboard, it will jumps back up again, it is quite annoying. You may need to try it on the physical iPad or the iOS simulator may not be able to catch the problem.
It seems this is an issue with iFrame on iOS.
...
liyam

Replied on June 30, 2016 at 1:06 PM

Hello kismef,

I'm not sure if this will work since I don't have an iPad. But can you try removingthis attribute on your iframe code and see if it fixes your problem:

onDISABLEDload="window.parent.scrollTo(0,0)"

Will be looking forward to your update.

Thanks
Condair

Replied on February 22, 2017 at 8:05 AM

Hi,

is there any solution?

I got exactly the same problem as kismef descripes.

Everytime when i scroll down by taping the side of the page, where the form not is, i can scroll done without any problems, but once i tap on the form and fields the page move up to start.

my code is:

<iframe id="JotFormIFrame-70113199729359" -webkit-overflow-scrolling:touch; allowtransparency="true" src="https://form.jotformeu.com/70113199729359" frameborder="0" style="width:100%; height:950px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { ifr = document.getElementById("JotFormIFrame"); } var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>

I have added: -webkit-overflow-scrolling:touch;

and remove onDISABLEDload="window.parent.scrollTo(0,0)" but the issue still here

Thanks!

Chor
Ashwin JotForm Support

Replied on February 22, 2017 at 12:12 PM

Hello Chor,

I have moved your question to a new thread so that we can address your issue separately. You will be answered in the following thread: https://www.jotform.com/answers/1073149

Thank you!