HYPE iframes appear to be broken in iOS 11.2.5

It would actually be useful to see zips of your .hype documents and know which UIWebView-based kiosk you were using and the process you used to load in them. The setup of using multiple documents can be done in a lot of various ways so isn’t straight forward to know exactly how you did it without seeing the real version.

Hype shouldn’t have any basic issues working within a UIWebView, but it might be that how the files are loaded by the kiosk software means you need to change the links or do other things.

I just used the inspector to put in a link in the simplest way possible. I have attached a zip of the project. Many thanks for having a look.

The kiosk apps I’ve tried which use UIWebView and don’t work are eCrisper, Offline Pages.

Kiosk Pro allows you to choose either WKWebView or UIWebView. The project doesn’t work when you select UIWebView as the engine. It does work when you select WKWebView as the engine.

Not seeing that ?

I can’t get the upload to work. I press the button, choose the file and it uploads and says it’s done but the only button then available is “Reply” I press that and the upload doesn’t appear in the my reply.

Here’s a link to the file

Since the only Kiosk app I can get to work with Hype is xStand I am trying to get xstand to display the Hype document at the correct size. All four other kisok apps displayed it at the correct size. in xStand it’s displayed too big for the iPad screen.

I have tried the following code in the html file to change the size:

<meta name="viewport" content="width=device-width, initial-scale=-100%" />  
Had no effect.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Had no effect.

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">  
Had no effect.

<meta name="viewport" content="width=device-width, initial-scale=0.625, user-scalable=yes" /> 
Had no effect.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

<meta name="viewport" content="width=1024" />

Had no effect.

I tried removing the inline cms size Hype puts in the html but it had no effect. The Hype doc still appears far to big for the iPad screen.

In hype the doc is 1600x1200 which is actually smaller than Hypes preset iPad pro size (this is being displayed on an iPad pro). I have tried ticking the scale buttons next to hight and width. No effect.

I thought maybe I would experiment with Scale parameters above Flexible Layout in Hype, but that entire panel will not let me input any numbers or change anything. Does anyone have any idea why that entire panel is locking me out?

Thanks.

With the document you sent I could reproduce this using the pages served from a local webserver both in eCrisper for iPad and on Mobile Safari (which is basically WKWebView). So I'm surprised this doesn't always happen for you.

I believe the issue is that the touch start (On Mouse Down) event is being transferred across page boundaries and triggering items in the next document. Instead of using On Mouse Down, you can use On Mouse Click and this will resolve the issue. Alternatively unchecking 'Use Touch Events' in the Document Inspector will also be another workaround.

Scale is an element setting as it is in the Metrics Inspector, so you must have an selected (and unlocked) element for this to be editable. It only changes the CSS transform:scale of the element, so probably not what you want. You may want to use Flexible Layout though: docs here.

xstand unfortunately isn't available in the US store, and the info I found was that the product has morphed to something for the mac called nobkiosk? You might want to contact their support about if they support the meta viewport settings and how to size appropriately. Hopefully with the mouse click tip you can use whatever software works best.

Thanks for your help on this. Re the UIWebView issue, I’ve tried changing to On Mouse Click but that didn’t solve the problem. Unticking Use Touch Events did solve the problem but it makes buttons very unresponsive, to the point of not acceptable on an iPad. I think this may be because with on Mouse click, any slight movement of the finger causes the click not to register. I found that a very quick tap works but a slow or sloppy tap does not work (with Use Touch Events not ticked). Clearly this won’t be good enough for use with the public.

The work around we’ve found is to go back to using Kiosk Pro which uses WKWebView (which works perfectly with HYPE). Kiosk Pro has a bug in the current version which does not work with iframes - that was the initial problem we had with this project.

So what we have done is replace the iframes with a JS scrolling window that loads the external content. This seems to work well.

2 Likes