Weird black (and gray) bars at top and bottom of the screen

Hey there,

I’ve been getting these weird bars at top and bottom. They don’t seem to be html/css elements, or i would’ve inspected and tried to resolve it.
These are kinda bars that I’m talking about.

(Image 1)

As opposed to the original project (which doesn’t have any bars).

(Image 2)

PS - I have forked (Image 1) project from (Image 2) project. So all the editor and rendering settings are same.

I can provide you a build/access to the project. Can you look into this?

If you can share a build of the project, we can start from there.

Here is the latest build, thanks.

I had a look at the build and it’s related to the code in the project.

When I start the build, I see this:

Blue is the HTML page where the canvas is not covering. The green and red are part of the app.

This shows that the canvas is not covering the window as you expected.

When I remove the code from the project (renamed __game-scripts.js), it looks like this:

And the canvas is covering the window as expected.

This means that something in the project code is resizing the canvas.

After deleting all the HTML modals elements, it looks correct again:

So something with the modals you are adding are affecting the positioning/rendering of the canvas.

If you are talking about the green and red sections that I’ve labeled before, the red is modal related/PlayCanvas UI related. The green is PlayCanvas UI related.

The background element Starting Screen has it’s anchor at [0.5 0.5 0.5 0.5] which means that depending on the window size, it may not fit and leave areas uncovered.

You can set the anchor to [0 0 1 1] which will always stretch the image to fit but may make the image look a bit odd as it’s not scaled proportionately.

Or I have a bit of code that does a similar thing to CSS cover here:

I removed all the HTML modals (and their respective CSS files) that I created thru code. And that kinda solved the problem, only thing is the content is filled on whole screen. Earlier it adjusted according to 16:9 ratio (making black bars appear
on the sides, which was fine)
This is the result…

I guess this also works, except all of 2D elements on UI are stretched and bit pixelated.

What do you mean by all? Even the buttons? What do you mean by stretched? Is it proportional?

What’s the end result that you are looking for?

If you are still having issues, can you share a public version of the project Editor itself of just the UI layout please?

What I meant was, The whole canvas (and the elements in it) are sorta scaled to fill the whole screen (instead of maintating 16:9 and allowing some dead black bars on left and right sides)

The result I was looking for was this…

Because this helps in adjusting the screen content across all aspect ratios.

I found culprit.

Some UI elements automatically got converted to 2880x1620 resolution. I don’t think I manually edited it to this wrong resolution, but anyway it’s now solved (as shown in first image).

Thanks for assistance tho :fist_right: :fist_left:

Just for the UI or for the whole app/game?

If the whole app, change the project rendering settings to ‘Keep aspect ratio’