[SOLVED] Raphael.min elements disappear of full screen mode

Hello, i’m hitting my head for few days already, when going fullscreen the ui elements disappear, since they are made using raphael.min i don’t know how to solve the problem, i searched without any success, so i made this code that is totally useless. Any idea?

self.app.graphicsDevice.fullscreen=true;
                var elem=document.documentElement;
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                } else if (elem.mozRequestFullScreen) { /* Firefox */
                    elem.mozRequestFullScreen();
                } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
                    elem.webkitRequestFullscreen();
                } else if (elem.msRequestFullscreen) { /* IE/Edge */
                    elem.msRequestFullscreen();
                }

Hi @ayrin,

Not sure what’s the issue here, I see you are selecting the document.documentElement that should select everything: both the Playcanvas canvas and any other HTML elements you are attaching.

Can you share a build url to see the structure of your DOM tree?

Hi @Leonidas, build url? not sure what u want to see :smiley: so this is the link since it’s not main game but just the character selection is not too complex https://playcanvas.com/editor/scene/896509

Ah good, let me see, can you add me momentarily to your project to give it a try? My PC username: leonidas

added it’s select scene

1 Like

@ayrin, can you add write access as well? I want to try updating your fullscreen code, thanks.

Oops sorry forgot :stuck_out_tongue: Done

I think I’ve fixed it, here is the updated code no need to set the Playcanvas graphicsDevice property. Most likely that was the issue, there were to requests to go full screen and only the first one was served:

            r.click(function(){
                var elem=document.documentElement;
                if (elem.requestFullscreen) {
                    elem.requestFullscreen();
                } else if (elem.mozRequestFullScreen) { /* Firefox */
                    elem.mozRequestFullScreen();
                } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
                    elem.webkitRequestFullscreen();
                } else if (elem.msRequestFullscreen) { /* IE/Edge */
                    elem.msRequestFullscreen();
                }
            });

Thanks @Leonidas it works like a charm :slight_smile: so happy!!

1 Like