Webhelp on ipad

[scorho]

We are in the final stages of developing a new help system using XMetaL, and are now testing on mobile devices. We've discovered that long topics do not scroll on iPad. They just get cut off. They look great on Android devices, though. Is there something we need to do to support our few long topics in iOS?

[Derek Read]

We have not tested this here so I'm not sure why the browser on an iOS would be doing this.
Do you know if this is a specific version of iOS that has this issue?

[Derek Read]

Is the issue possibly one of these (ie: just long pages in general, not specifically our webhelp)?

https://discussions.apple.com/thread/2525471?threadID=2525471
http://ipad.bigresource.com/Track/ipad-ZJniZyqDj/
http://ipad.bigresource.com/Track/ipad-js7XDefUR/

[scorho]

It doesn't seem to be the same as those issues, although it could be related. Whether in portrait or landscape mode, whatever fits on the screen is what you get. Even trying to pinch down the size of the text doesn't matter. The whole window tries to size down, not just the content.

Because I'm not seeing the issue on any other browser, including my default Android browser, I'm happy saying it's an iPad issue. However, it didn't happen with the webhelp we built with a previous authoring tool. Maybe it's an HTML frames vs iFrames issue on the iPad?

[WF74]

@ scorho:

We encountered the same problem when trying to upload to an iPad. No scrolling in the iframe. Did you maybe hear of a solution yet?

[Derek Read]

If you load your content into one of the iPad emulators does is it broken there too?
I'm looking for a way to check this but so far the emulators that I have tried viewing Webhelp output in seem to have no trouble with scrolling.

Here is an example:
http://ipadpeek.com/?url=http://na.justsystems.com/webhelp/en/xmetaldeveloper/pg/6.0/pg.html

The first part of that address is the emulator, the portion after the "url=" is a link to our online version of the XMetaL Developer Programmers Guide, which was generated using the Webhelp output from XMetaL Author Enterprise 6.0.

If your content is broken when viewing there then I might have something to work with.
If your content looks OK then I guess that emulator doesn't properly emulate the limited functionality of a real iPad.

If you can find another emulator that properly mimics this broken scrolling behavior that would help.
Also, have you contacted Apple to see if they are working on a solution?

[Derek Read]

OK, well, looking at these online "emulators" I see that they are really just letting you test the viewscreen size, presumably so you can design a page to "fit" into the iPad. They are not true emulators (though they attempt to disable Flash), most of them are just displaying the referenced page inside an iFrame, so the actual browser displaying the "emulator" is also rendering the rest of the content.

If anyone knows of a proper emulator please let me know.

[Derek Read]

Did some more searching and turned up this:

http://www.twoideas.org/2010/04/ipad-interface-quirk-scrolling-frames-lack-scrollbars/

Can you try the solution suggested there? I see in the comments section below this suggestion that lots of people are having trouble with this gesture. Ideally what would be good to know is if our Webhelp has this issue even using this gesture and that other pages that use frames somehow don't. If everything does then perhaps that is something Apple should fix.

I see lots of posts for iPad users having trouble with this for all kinds of websites that use frames and iframes. Some suggest certain versions are simply broken (possibly iOS 4.2.1). Example:
http://stackoverflow.com/questions/4599153/iframes-and-the-safari-on-the-ipad-how-can-the-user-scroll-the-content

My Google search terms: +ipad iframe

In the iPad documentation in the Safari section it does not specifically mention missing scrollbars (I would actually call that a bug rather than a good Apple design choice) but they do say this:

Scroll within a frame on a webpage

Use two fingers to scroll within a frame on a webpage. Use one finger to scroll the entire webpage.

[Derek Read]

Perhaps try this page. If it works then it might be possible for us to alter our Webhelp so that it works similarly:
http://developer.apple.com/library/ios/#samplecode/UICatalog/Introduction/Intro.html

I see that page checks specifically for the iPad and presumably serves up alternative content for that device:

Code:

if (document.getElementById('book-resource-type').content === 'Navigation' && navigator.platform === 'iPad')...

[WF74]

Hi Derek,

This last example seems to work perfectly on the iPad.

Thanks for your time, it's a big client for us and your effort is greatly appreciated. And sorry for the late reply, apparently I did not turn on my notifications.

[scorho]

Thanks, Derek, and WF74. I haven't had a chance to test this yet, but it looks promising.