IE 11 Fullscreen

[ch...@cwfent.com]

Hi,

IE 11 has full screen javacscript support, I was hoping the full screen button would appear in the html5 viewer but it doesn't. Is there a way to enable this?

Thanks!

[Matt Parizeau]

Hi,

We use Modernizr for the full screen feature detection and the current version does not detect IE11 (see https://github.com/Modernizr/Modernizr/issues/1108).  I've updated the Modernizr version that WebViewer is using and have attached it to this post.  You'll need to replace lib/html5/external/modernizr.custom.js.

The necessary code for IE full screen support to work isn't in WebViewer 1.7 but you can easily add this yourself.  Look in ReaderControl.js for $('#fullScreenButton').click and in the callback replace the code there with:

var inFullScreenMode = document.fullscreenElement ||
    document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;

if (inFullScreenMode) {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
} else {
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
    } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    } else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        //Safari silently fails with the above, use workaround:
        setTimeout(function() {
            if (!document.webkitCurrentFullScreenElement) {
                docElm.webkitRequestFullScreen();
            }
        },200);
    }
}

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Matt Parizeau]

I may have spoken a bit too soon as it seems like there are some issues with IE's full screen mode and iframes.  I'll have to investigate some more to see if there are workarounds.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[ch...@cwfent.com]

Thanks Matt,

Do you mean it's only a issuu if we are displaying the viewer in a iframe? Or its a issue in general because webviewer is creating its own iframe?

-Chris

[Matt Parizeau]

Hi Chris,

Unfortunately it's an issue in both cases you mentioned.

I've done some more investigating and it seems like the cause of the issue might be an IE11 bug.  The problem has to do with the reported size of the body of the iframe when it's full screen.  We're using jQuery's width function which eventually uses element.offsetWidth and for some reason this is a very small value in IE11 whereas Chrome and Firefox report it as expected.

I filed a bug report for IE11 you can see here: https://connect.microsoft.com/IE/feedback/details/814527/ie11-iframes-body-offsetwidth-incorrect-when-iframe-is-in-full-screen-mode

Unfortunately this means that IE11's full screen mode won't really work correctly with WebViewer's iframe until that issue is fixed.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[ch...@cwfent.com]

Hi Matt,

If you look at that bug report you posted there is a work around, is it possible to do that multiplying and rounding he suggests in Webviewer?

TIA

[Matt Parizeau]

I gave it a quick try and it seems like for at least the body the width and height values are already rounded so 1920 becomes 19 and 1080 becomes 10.  I tried multiplying these but IE will give errors about setting read only properties.  We use the width function in many places so maybe you could modify jQuery so that the width function can check for IE and full screen mode and then multiply the value by 100 but I'm not sure this would even work.  Unfortunately at the moment it seems like too much effort for something that doesn't seem likely to work, especially considering the issue is an acknowledged browser bug that should (hopefully) be fixed.

If you want to experiment with modifying jQuery then let me know how it goes and I could possibly help answer some questions.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[ch...@cwfent.com]

Thanks for taking a look Matt, I was afraid it would turn out something like that #^$%## IE!! I'll keep holding out for a IE update.

-Chris

[Matt Parizeau]

So almost one year later it seems like this still isn't fixed in IE. However we have taken another look at it, spent some time really digging into the problem and in the end it did involve a bit of a hack into jQuery unfortunately (among some other changes). However we have a workaround that seems to actually work.

You can download a build with the workaround here: http://www.pdftron.com/ID-zJWLuhTffd3c/WebViewer/WebViewer_1.8.1.29428.zip

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[ch...@cwfent.com]

Awesome! Thanks Matt, I'll give it a try. This is just a one-time special or will the fix be in the next webviewer public release?

Thanks Again!

[Matt Parizeau]

We're planning to include it in the next public release.

Matt Parizeau

Software Developer

PDFTron Systems Inc.