Presentation Mode not working in Safari

[osuritz]

Hello,

Just me again... your friendly-neighborhood bug reporter ;)
It appears that Presentation Mode (aka Fullscreen mode) isn't working in Safari (at least not on MacOS).

I found this SO issue and it seems to apply: http://stackoverflow.com/questions/8427413/webkitrequestfullscreen-fails-when-passing-element-allow-keyboard-input-in-safar

Basically, if you drop Element.ALLOW_KEYBOARD_INPUT from the call to webkitRequestFullScreen it sort of works. E.g.

//this.container.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
this.container.webkitRequestFullScreen();  // probably breaks Chrome, through.

I doesn't render well though… e.g. if the developer bar was open at the bottom when webkitRequestFullScreen is called, then there's a gap in the fullscreen view where the dev bar was.

Could we maybe hide the Presentation Mode in Safari until it can be rendered correctly?

[sharanmunyal]

Any updates here?

[CodingFabian]

I just came across this video.js issue for fullscreen:
videojs/video.js#1100

what they say is that in Webkit one should use webkitRequestFullscreen with lowercase s, then also keyboard controls would function correctly

/cc @Snuffleupagus

[Snuffleupagus]

@CodingFabian Interesting find!
However I would suggest that we simply disable Presentation Mode in Safari for now, and then someone can follow-up with a PR that changes the method and re-enables Presentation Mode in Safari.
(Since I don't have access to Safari, I would have no way to verify that this works.)

[ottonascarella]

adding this seems to fix it:

    if (this.container.requestFullscreen) {
        this.container.requestFullscreen();
    } else if (this.container.mozRequestFullScreen) {
        this.container.mozRequestFullScreen();
    } else if (this.container.webkitRequestFullScreen) {
        this.container.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        if (!document.webkitCurrentFullScreenElement) {
            this.container.webkitRequestFullScreen();
        }
    } else if (this.container.msRequestFullscreen) {
        this.container.msRequestFullscreen();
    } else {
        return false;
    }

[andreabisello]

Hi,

Safari or Chrome on ipad 8.4.1 doesn't show fullscreen button on the demo page (https://mozilla.github.io/pdf.js/web/viewer.html) .

Is this problem solver or not?

[timvandermeij]

If the button is not showing, then we have detected that presentation mode is not working and we have disabled it to avoid problems with browsers that do not (fully) support the Fullscreen API.

[sunil4infobeans]

HI,
Facing same issue as mentioned by @abioneperhobby
Doesn't show fullscreen button on iPad and iPhone devices.
Same issue with https://github.com/kogmbh/ViewerJS.

Is there any possible solution for this issue?

[ghost]

This is not working (anymore) on newest Safari and iOS version. The button is not shown, and if I disable the check to show it there is nothing happening after I click on it.

You can test this by opening Safari on your iPhone and navigating to the pdf.js demo here: https://mozilla.github.io/pdf.js/web/viewer.html