Displaying Signing Ceremony iFrame on mobile Safari Browsers

Actually, this is something that has come up before, specifically with the iPad. Here is a link to the post on that:https://community.onespan.com/forum/web-application-using-ipad-esign-signing-techniques In the end, I think the height of the iFrame needed to be like 700px. This issue didn't happen with the same application in Android or on a PC. A bug was filed on it to determine if there was something on our side that could be done for it, but I don't know what the result of that was. I can look into it. What is the current height of the iframe?

Hi Michael, Thanks for the information, unfortunately it hasn't helped us solve our problem. The issue that we're currently struggling with is that for long templates, clicking on the "click to sign" box scrolls the iframe to the top of the document, and you are unable to complete the signing ceremony. Here's a JSFiddle that demonstrates what we're talking about: http://jsfiddle.net/cLj1a7ft/7/ The only other thing we've managed that's close is the following JSFiddle: http://jsfiddle.net/cLj1a7ft/3/ It scrolls the entire document in an iframe, instead of scrolling within the div - the problem with this version is that after signing, the confirmation popup appears in the middle of the entire document rather than in the displayed area. You'll likely have to create your own package/ceremony and substitute the values into JSFiddle's iFrame - the existing ones will be expired by the time you read/test this. But I figured that would be better than having nothing to work with! This is a pretty big issue for us, as we expect iPad and Safari to be one of the primary means of users complete signing ceremonies. We don't expect customers to be satisfied with either of these solutions. :( We've also considered opening the signing ceremony in a new window instead of the iFrame, but Safari can only open the signing ceremony via a click event - which would require some significant re-work of the functionality - and after the signing ceremony, customers would have to close the signing ceremony tab, return to our application's tab, and refresh. Far less than ideal as well. Any help or suggestions would be appreciated! Thanks, -Chris

Hey Chris, I put a simple package with a single, one page document in the first JSFiddle and had no problems signing? Is this only on multi page documents? A signature on the second page is getting bounced back to the beginning?

When I haven't completed the consent document, I cannot get past that page. I just get bounced to the top when trying to accept the document. This is just like the situation that I linked above only yours doesn't seem to be fixing the same way. I'll try it out in your other JSFiddle and let you know. FYI - There is currently a bug around this that's being investigated at the moment. I will let you know if I find more on this.

Hey Chris, An update on the situation. We're escalating this issue to try to determine what it is that's causing it, but as you can see, it's only for iPad, it seems, and only for the situation in which the iFrame is inside a div. I set up some more tests and given the different sizes of the div/iframe, I can access more signature blocks down the page, but anything past mid-page on page 2 on an iPad, it bounces to the top, with this layout. I will keep you updated.

Thanks a bunch for the continued support Michael. It's much appreciated. It does look limited to iPads, though not to Safari on iPads. That said, it seems as though Firefox and Chrome use a lot of the same rendering code as Safari under the covers, so it's maybe not surprising that all browsers have the same issue. We don't have a problem with the consent form, simply because we don't include it in our signing ceremonies - but yes that does sound like the same issue that we're having. One of the things we were sort of hopeful about is that you folks may be able to provide a fix to help the confirmation dialog that appears when a signer is complete (the JSFiddle above that scrolls the entire iFrame). We could probably live with this as a short-term solution (though it's not ideal), if the user didn't have to search the entire document for that confirmation dialog (it appears in the middle of the document, instead of the middle of the screen). Again, thanks a bunch for your support! Cheers, -Chris

Hey Chris, This is only happening when setting a height for the div surrounding the iframe. If you don't set the height, all works fine. Still working on a determination if this is something that can be fixed on our end and what that might be since this is only happening with iPad. When I left the div surrounding the iframe and signed a 3 page document, the "finished signing" pop up showed up right in the middle of my iPad screen down on page 3, so this didn't seem to be a problem either.

 div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;" >
                         iframe id="frame0" name="iframe0" width="600" height="800" frameborder="2" scrolling="yes" src="url" >
                                Your browser does not support iframes.

                         /iframe >
                 /div >

Hey Michael, I'm a developer who's working with Chris on this issue and I tried your solution above and it did not work for me. I used a three page document. When I finished signing I scrolled up to the top of the page to click the confirm button and I still have the confirm popup showing up in the middle of the document not the middle of screen, so I have to scroll down to find the popup. I've attached some screenshots of a jsfiddle example that is pretty much the code from your post above showing that flow I went through. I've also tried just completing the final signature and having the confirm popup appear without scrolling up to click the confirm button and the confirm popup still appears in the middle of the document. Here's the link to the jsfiddle example https://jsfiddle.net/qLde3exo/1/ Not sure what is different between your scenario and mine but hopefully the screenshots and link help. Please let me know if there is anything else you need to know from me. Thanks, Sean

Interesting. I will try with your code when I get a chance. I am out of the office at a developer conference, this week. Will likely be tomorrow, but I'll try to get to it, today. What iOS are you testing on? I think my iPad is still on 9.3.5 or something like that. We have determined that there are pretty wide spread issues with iframes and iOS. We are working on a solution that puts in a delay for the click action to start that seems to be helping. Still some testing to be done. I will keep you updated when I hear more and also let you know what I see after trying your JSFiddle code.

I'm on iOS version:10.1.1

Just now getting to try out the JSFiddle. I will let you know what I find. I won't update my iOS until I get back home, most likely. I also have a couple other things to test from the discussion about this within the R&D ticket. I will update as I figure anything out from testing. Thanks for your patience.

Yeah. In your example on JSFiddle, it's popping up the confirm dialog in the middle of the screen for me. I will update my iPad when back home and test again and let you know.

Yeah another person at our company tried it on an iPad mini that was on iOS 9.something and he said the confirmation popup showed up where it was supposed to. I don't know whether it was the fact that it was a mini but I assume it's the iOS version.

My iPad is downloading the update. I will let you know as soon as it's done and I test.

Well, I take that back. It was only checking for updates and there isn't an update to 10, for me. I'm guessing this is because I've got an older iPad. Maybe I have topped out at 9.3.5 or they just don't have 10 released for my older iPad yet. I will find someone with a newer iPad that can help me test this. I will let you know what I find.

Hello Team, We are facing the same issue as in iframe we are not able to view Signing Ceremony on IPAD Safari browsers. We have tried above solution provided by Michael Williams but it didn't work for me. Could you please provide the suggestions? On top of above your solution, we have even tried with different resolutions for IPAD devices but still no luck. Could you please provide your thoughts? Regards, Pratik