[hmtl5mobile] iPad on rotation WebViewer partially going off screen

[Vladimir Knobel]

Hi 

I don't know if this something WebViewer has to take care off or we should do some calculations so it doesn't happen but in iOS when changing the device orientation the contents of the WebViewer go partially off screen (see attached images).

Is there a know workaround for this?

[IMG_0299.png]

Thanks in advance for any hint.

Regards

Vlad 

[Matt Parizeau]

Hi Vlad,

Are you setting mobileRedirect to false? There are a number of problems with mobile browsers and iframes which is why we have the mobile viewer redirect by default. You could refer to this post to see if this workaround helps: https://groups.google.com/d/msg/pdfnet-webviewer/aQAVm08Vkr0/1MC4kfYWCDEJ

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Vladimir Knobel]

Hi Matt,

We are not setting the redirect to false, it's in fact redirecting to html5/MobileReaderControl.html.

Would the proposed solution in the referenced post work in that case?

Thanks for your support.

Best regards

Vlad

[Matt Parizeau]

Hi Vlad,

If you are redirecting then the proposed solution isn't applicable.

It looks like you've made some customizations to the mobile viewer so would it be possible to send a sample application that reproduces the problem. It might be that one of your customizations is causing the issue.

Are you able to reproduce the problem from our demo page (https://www.pdftron.com/webviewer/showcase/)?

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Vladimir Knobel]

Hi Matt,

We are actually not doing any modifications to the mobile viewer just calling the demo code for Cordova but I see that the showcase is working fine in iOS Safari.

Could it be related to the fact Cordova uses an iframe to display the contents? So it's not exactly the same scenario since in the showcase MobileReaderControl isn't loading inside an iframe.

I think the solution may be to detect the orientation change outside the iframe in the Cordova app and then call the code proposed and somehow commented out inside MobileReaderControl.js

Enter code here...

Best regards

Vlad

[Vladimir Knobel]

This is the commented out code in MobileReaderControl.js:

 //$(window.top).bind('orientationchange', _(this.onOrientationChange).bind(this));

            //window.top cannot be accessed if this page is in an iframe, where window.top is from another origin

            //note: if window !== window.top, then orientation change is not detected, and the viewer's viewport will be incorrect

            $(window).bind('orientationchange', _(this.onOrientationChange).bind(this));

[Matt Parizeau]

Hi Vlad,

When you say that Cordova uses an iframe for displaying do you mean a UIWebView? Or do you mean you're using an iframe inside your Cordova app? You could try uncommenting that code in MobileReaderControl to see if it makes a difference.

Have you tried following the WebViewer Cordova sample instructions on a completely fresh app? Are you able to reproduce the problem doing that? Also which device and iOS version are you testing with?

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Vladimir Knobel]

Hi Matt,

Yes we were loading the viewer inside an iframe inside a cordova app, it works but has a lots of diverse problems.

Now we have gone back to loading the viewer without an iframe that's also not without some issues.

Regards

Vlad

[jke.s...@googlemail.com]

Hi Matt!

 

We have the same issues with Safari on iOS devices. We've tested it with an iPad Air (iOS 7.0.6) and an iPad mini with 8.1.3. Both show the same behavior after rotation change to landscape. In landscape only the middle of the page is visible without means to scroll.

 

Both tested with the sample page for HTML5 from pdftron ( c.f. attached screenshot) The user is not able to see the top and bottom of the page. Even after zoom to make it small, the page flips back to too large.

 

Any help would be appreciated,

Jens

 

 

[Matt Parizeau]

Hi Jens,

Unfortunately to have this work properly on iOS devices you'll need to set mobileRedirect: true in your WebViewer options so that the mobile viewer isn't displayed in an iframe.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[jke.s...@googlemail.com]

Hello Matt,

 

We do not set mobileRedirect and it should therefore be true by default.  However, even if we set it explicitly to "true" it won't change anything. After orientation change parts of the page are not visible anymore.

 

And the screenshot I've added was done on your sample page. Native browser to the sample. Does you demo not have set mobileRedirect: true?

 

Best regards,

Jens

[Matt Parizeau]

Hi Jens,

You're right, mobileRedirect is set to true by default. If your page is redirecting then it shouldn't have the same issues with orientation change. Can you try viewing a document from https://www.pdftron.com/webviewer/showcase/ on an iOS device and see if you have any issues. This sample does redirect the mobile viewer and I can't reproduce the issue.

The screenshot you've posted is from the universal sample and it does set mobileRedirect to false which is why the issue occurs. You can see that from the linked settings file: https://www.pdftron.com/webviewer/demo/lib/universal/settings.js

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[jke.s...@googlemail.com]

Hi Matt,

 

Thanks for the hint about the universal webviewer. This explains why it was not ok in my sample tests. I've tested it with the showcase page and it was fine.

 

Unfortunately it does not help in our application where everything lives in a shellframe (SPA). Even with mobilRedirect set to true the outer frame is always there and leads to problems with the viewport.

 

We have to find a workaround than.

 

Kind regards,

Jens