godotengine / godotengine/godot

Landscape orientation is shown rotated upside down in Firefox for Android (web export)

Open
#99,940 2 comments 0 reactions 0 assignees View on GitHub
bug needs testing platform:web topic:export
Dominant language
C++
Stars
117k
Forks
26.8k
PR merge metrics
PR metrics pending

Description

### Tested versions

- Reproducible in v4.3.stable.flathub [77dcf97d8]

### System information

Android 10; Samsung Galaxy J6+; Browser: Fennec (Firefox) v133.0.0 (F-Droid); Compatibility renderer; GLES 3.0 / WebGL 2.0; Logs "Using Device: Mozilla - Adreno (TM) 330, or similar"

### Issue description

I tried the web export on a mobile browser (on Firefox/Fennec in Android), but there's several issues.

Firstly, I'm sometimes getting out of memory error (probably the same as #70621) on Android. I didn't get it when enabling PWA (I don't know if it's a coincidence or if it's fixing it somehow). Anyway, this is just for context (separate issue).

The main issue is that when the game is in landscape (or sensor_landscape) mode, the image shows rotated 180 degrees upside down. ***Strangely it's just the image*** -- the clickable areas are still triggered according to the correct orientation, so ***there is a mismatch between what is shown and what is processed***.

No idea what is happening -- maybe something is rotating the canvas twice on landscape? E.g. both at HTML/JS and internal Godot WASM level?

I also tried enabling the "Desktop Site" toggle in Firefox, but it didn't have any difference, it still has the issue.

### Steps to reproduce

On a new empty project for web (compatibility renderer):
1. Create a simple scene with an ImageButton node anchored to bottom-right of the screen.
2. Make clicking the button do something visible, e.g. change the background color.
3. Set `display/window/handheld/orientation` to Landscape on project settings.
4. These settings might be relevant as well?
- `display/window/stretch/mode` = canvas_items
- `display/window/stretch/aspect` = keep_height
5. Export a single-thread web project (you might want to enable PWA and set orientation to Landscape; though it doesn't seem relevant).
6. Start a server e.g. with `npx serve` on the output folder and access it by IP from a Firefox browser on an Android device.
7. If it takes too long to load, you may want to connect Desktop Firefox to it to see the remote console (you might need to kill ADB first); as it might have the out of memory error issue. If not, then it should load the scene.
Side note: This test would be much simpler if the "Start HTTP Server" feature in Godot allowed accessing the port from other devices on the same LAN, such as from a phone.
8. Let the phone orientation unlocked. You should see it correctly in portrait, but upside-down in landscape. Clicking the button should seemingly do nothing, but it's clickable on the opposite side to where it's shown (at the "correct" location).

### Minimal reproduction project (MRP)

I expect this to be reproducible on an empty project as said above (thought I didn't create one just to test this).
I can try to provide one if it's not reproducible.

Here's the export preset:
```ini
[preset.2]

name="Web"
platform="Web"
runnable=true
advanced_options=true
dedicated_server=false
custom_features=""
export_filter="all_resources"
include_filter=""
exclude_filter="~~*"
export_path=".build/Web/index.html"
encryption_include_filters=""
encryption_exclude_filters=""
encrypt_pck=false
encrypt_directory=false
script_export_mode=2

[preset.2.options]

custom_template/debug=""
custom_template/release=""
variant/extensions_support=false
variant/thread_support=false
vram_texture_compression/for_desktop=true
vram_texture_compression/for_mobile=true
html/export_icon=true
html/custom_html_shell=""
html/head_include=""
html/canvas_resize_policy=2
html/focus_canvas_on_start=true
html/experimental_virtual_keyboard=false
progressive_web_app/enabled=true
progressive_web_app/ensure_cross_origin_isolation_headers=true
progressive_web_app/offline_page=""
progressive_web_app/display=1
progressive_web_app/orientation=1
progressive_web_app/icon_144x144=""
progressive_web_app/icon_180x180=""
progressive_web_app/icon_512x512=""
progressive_web_app/background_color=Color(0, 0, 0, 1)
```

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue from the export preset in .build/Web/index.html, serving it with npx serve and testing the landscape orientation in Firefox/Fennec on Android. Trace the web export, canvas orientation, and WASM handling implicated by the mismatch. Done means the displayed image and clickable areas align in landscape while portrait behavior remains correct.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, godot, wasm
Domain
game-dev, mobile-dev, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.