Full Screen Mode Animation - Clickable elements not working.

[dc257]

Hi everyone,

I've used some code to make my interactive animations display full screen (not "responsive", as in the publish settings... which seems to just scale). Whilst it all works fine visually, for some reason any clickable elements near the top of the page no longer work. As soon as I exit full-screen mode, they work again. I'm guessing it may be something to do with the aspect ratio of the canvas not matching that of the browser window, but I'm not sure? Any ideas what could be happening? My canvas size is 1920x1080.

function launchFullscreen() {

    var i;
    var elem = document.getElementById("canvas");
    var fs = ["requestFullscreen", "webkitRequestFullscreen", "mozRequestFullScreen", "msRequestFullscreen"];
    for (i = 0; i < 4; i++) {
        if (elem[fs[i]]) {
            elem[fs[i]]();
            break;
        }
    }
}

[dc257]

OK... update... If I change 'canvas' to 'animation container' - all the clickable elements now work as expected, only things are aligned left rather than center.

Scratching my head trying to understand what's happening here. It's as if after calling full-screen, the locations of the clickable elements on the page shift a little from their expected positions for some reason?

[dc257]

Could it actually be the mouse/pointer that's 'out of sync' after full-screen is entered? The reason I'm thinking this is that visually everything looks fine, it's just that the mouse pointer appears a bit to the right or a bit below buttons. Would this be affected by going full-screen? Is there a way I could test this by somehow realigning the pointer relative to the stage?

[dc257]

I've managed to create a workaround that works!

In the html file, I've added a new div that contains both the 'animation_container' and 'canvas' divs. Then I've targetted my new div with the fullscreen function rather than the canvas directly.

I'm really pleased that it works, but it would be good to know exactly why.