Phaser's Canvas covers everythiing

Phaser 3
1

This used to work but not now:
I stacked up a bunch of HTML <div>s to cover all or part of the game canvas for loading, title, debug screens. They are display:none until I need them. But now no matter what z-index or display values, they are hidden behind the game’s canvas.

Canvas is supposed to be lowest z-index but acts like the highest

</style>
.screen   { position:absolute; left:0px; top:0px; width:100vw; height:100vh;    overflow-y:hidden; ; display:none;     transform: none !important;   }

#game          { z-index:0; display:block;                                                     }
#gui           { z-index:1; height:auto;    background-color: #27176b; color:white               }
#titlescreen   { z-index:2; display:block;  background-color: white;  padding:8vh 0;           }
#loginscreen   { z-index:3;                 background-color: rgba(0,63,0, 0.8);               }
#loadingscreen { z-index:4;                 background:     url('assets/kids.png');  }
#debugscreen   { z-index:5; width:300px; right:350px; top:10px;  background-color: blue;       }
</style>

<div id="game"           class="screen" ></div>
<div id="gui"            class="screen">...</div>   
<div id="titlescreen"    class="screen">...</div>
<div id="loginscreen"    class="screen">...</div>
<div id="loadingscreen"  class="screen">...</div>
<div id="debugscreen"    class="screen">...</div>
2

Find the game canvas in the DOM Inspector.

3

Thank you Samme.
I found it and found that it had this property
transform: none !important;

I have read that both transform and opacity will elevate an element higher than its z-index deserves. So I set that property on all my divs.! But no joy.

I can manipulate the canvas in the DOM inspector but I cannot get it to display beneath other divs. Am I fighting Phaser? Any idea?

4

Can you screenshot that portion in the DOM inspector?

5

Thanks, Samme

But I just found the bug
9 hours of my life I’ll never get back. But maybe I can save somebody else the frustration!

Bug:
My game plays in fullscreen mode.
A fullscreen request must be made by a legit HTML element in response to a user action.
I called the method on the game div that holds the canvas.

document.querySelector("div#game").requestFullscreen();

That was dumb.
It caused the game div to assert domination over the whole screen while in fullscreen mode.
The problem looked like z-index, but was actually more screwed up than that.

The fix:

HTML

<div id="stack" >
    <div id="game"           class="screen" ></div>
    <div id="gui"            class="screen">...</div>   
    <div id="titlescreen"    class="screen">...</div>
    <div id="loginscreen"    class="screen">...</div>
    <div id="loadingscreen"  class="screen">...</div>
    <div id="debugscreen"    class="screen">...</div>
</div>

JS

`

document.querySelector(“div#stack”).requestFullscreen();

`

CSS

 #stack    { position:relative; left:0px; top:0px; }
 .screen   { position:absolute; left:0px; top:0px; width:100vw; height:100vh; display:none;}
etc (see above)

Thanks!

1 Like