2

I have problem with returning from full-screen mode in Chrome Mobile. I found some fullscreen example and added one feature. When browser is in full-screen mode then image border is red.

#root:-webkit-full-screen  > .img-wrap > .img-01
{
    border: 2px solid red;
}

Sample app you can find here: https://codepen.io/herrmefisto/pen/eraKKg

If you click button then it will open in fullscreen mode and image border will be red. If you push "Esc" button then border will be still red!! On real android device Esc == back button.

I found also that events: webkitfullscreenchange, mozfullscreenchange, fullscreenchange, MSFullscreenChange are not fired when pushing Esc button on keyboard.

There are few libraries (cross browser) like e.q BigScreen (https://brad.is/coding/BigScreen/) but this bug exists also here.

Is anybody know how to make some hack/workaround to make it work?

In desktop Chrome (ver 66) it works fine.

Herr Mefisto
  • 567
  • 1
  • 4
  • 5
  • What Chrome mobile version? Try using [this solution](https://stackoverflow.com/a/25876513/7663972). – camelsWriteInCamelCase May 24 '18 at 12:37
  • I did it in exactly same way, but it doesn't work. What Chrome mobile version? - You can open Chrome on desktop (I have version 66) and push F12 to open developer tools. Then click "Toggle Device Toolbar" to open app in emulator. It works exactly the same as on my Android Device (Samsung Galaxy A5 with Chrome 66.0.3359.158) – Herr Mefisto May 25 '18 at 06:40
  • If the problem was solved, please [accept](https://stackoverflow.com/help/someone-answers) the answer that you believe is the best solution to your problem, or you can provide and [accept your own answer](https://stackoverflow.blog/2009/01/06/accept-your-own-answers/). – camelsWriteInCamelCase Jun 18 '18 at 12:07

2 Answers2

0

Fullscreen is not available in SO snippet, so I made a fork of your version on codepen.io with "exitHandler" method changes. From this:

function exitHandler() {
    if (
       !document.webkitIsFullScreen 
       && !document.mozFullScreen 
       && !document.msFullscreenElement) {
        console.log("asdasd");
    }
}

to this:

function exitHandler() {
    if (
        document.webkitIsFullScreen === false 
        || document.mozFullScreen === false 
        || document.msFullscreenElement === false
    ) {
        alert("exit fullscreen");
    }
}

On my Android device (not Samsung Galaxy A5) with Chrome v.66.0.3359.158 in fullscreen mode on Esc key press the alert is displayed, so "webkitfullscreenchange" exit event is fired. The border color of the picture also changes after exiting the fullscreen mode.

But in Google Chrome for Windows v.66.0.3359.181 in device toolbar none of the devices is firing the fullscreen exit event. But if you choose "Responsive", then everything is OK with any screen size. If no one has posted a bug about this, then you should do so.

camelsWriteInCamelCase
  • 1,655
  • 1
  • 10
  • 15
0

Opening, document.documentElement:

document.documentElement.requestFullscreen();

Exiting full screen mode, document object:

document.exitFullscreen();

Manually, you drag the top of the screen to down, and Android shows the android navigation bar.

Sergio Abreu
  • 2,686
  • 25
  • 20