Canvas (WebGL) is incorrectly sized before I touch screen. How do I fix it?

Unity Engine
, , , , ,
1

I don’t know if this is related to Unity or HTML/JS/CSS so I’ll ask here just in case. When I goto my game site, game loads normally. However, looks like height of unity-canvas is sized incorrectly and bottom part of the game exceeds viewport. It’s fixed if I touch screen. After that when I look at console it tells "Performance Warning: Recreating Offscreen FBO (722x1845 => 722x1320). Now game looks how it should. This new height matches height of unity-canvas too.

This happens only with two of my android setups: android 10 and 13, chrome, portrait orientation. Landscape works correctly and recreation doesn’t happen. If I change to portrait by turning device (to keep fingers off screen), all is fine too. Starting with portrait causes the problem. At least PWA and Default WebGL Templates behaves the same way. Windows chrome and iPad safari works fine though.

Game looks too ugly now… How to start game with correct size?

I took two screenshots while inspecting phone with chrome Dev Tools. URL, tabs, settings etc. are in black area but dev tools just doesn’t show those. Canvas should fit in between bottom and black area.

Before touching:

Before_first_touch
Before_first_touch680×1314 54.3 KB

After touching:

After_first_touch
After_first_touch679×1314 45 KB

2

If it works fine on other platforms then send a bug report specifying the tested devices.
They’ll probably get it fixed at some point.

3

I found the reason for this finally. window.innerHeight seems to include virtual keyboard on chrome for android even though it’s not visible.

To fix that, I needed to add interactive-widget=resizes-content to viewport meta tag. It’s in index.html of a Unity’s WebGL template.

1 Like