Full Screen Mode Animation - Clickable elements not working.

Explorer ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

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;
        }
    }
}

 

 

Views

63

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 22, 2022 Mar 22, 2022

Copy link to clipboard

Copied

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?

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 22, 2022 Mar 22, 2022

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 22, 2022 Mar 22, 2022

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines