Display incorrect when running on web browser on Android phone

Godot Version

4.4.1

Question

I’m having an issue where a Godot app is displaying incorrectly when running on a web browser on an Android phone. It runs fine when running on IOS or Desktop web, and also runs fine when exported as an Android mobile app, but seems to be bugged when running in web browser on Android.

The two issues are stretching and a partially transparent animated texture displaying as a black box.

The app should have a square aspect but is being displayed squished. However, the Area2D based touch sensors are not being squished so the button hotspots are all offset from where their graphics are.

The black box is supposed to be a sparkle animation, but is being displayed as a black square. It has no shaders or anything like that on it. I’m not sure why this is causing a problem because the green and yellow wheel wedges are also partially transparent animated sprites.

The game is posted for now here:

Edit:
It also seems to fail when I run on Firefox desktop. The error message is that WegGl2 is not supported, but I do have that enabled in Firefox.

1 Like

A black texture indicates that the texture could not be loaded. Make sure that the texture is no bigger than 4096x4096 3D rendering limitations — Godot Engine (stable) documentation in English

2 Likes

You’re right about the texture - it was too big. Thanks!

Would you have any ideas why there’s a scaling issue?

1 Like

I’m not really sure. Check this documentation page Multiple resolutions — Godot Engine (stable) documentation in English which may help you find out where the issue is.

1 Like

in project settings, go to display, window and scroll down to stretch. set mode to viewport and aspect to keep. that should hopefully fix it. also make sure that at the top, viewport with and viewport height are the size that you would like

also i’m not sure why it wont work on firefox, but on my chromebook, i visited your game, and it was just a white screen. i tried refreshing, but still nothing. just thought i would let you know

Looks like once I fixed that oversized texture problem it worked on Firefox again.

Also, found a work around for the sizing problem by putting the app inside an iframe: