CODEWITHSUNDEEP
javascripthtmlunity-game-engineunity-webgl
abhishek ranjan
abhishek ranjan

Reputation: 652

Portrait mode shows black screen on a browser in Unity Webgl, landscape opens fine

I am using Unity version 2019.4.19f1 to make webgl build. After making the build I resize the unity canvas using these line below (in UnityLoader.js inside "DOMContentLoaded" eventlistner):

let unityContent = document.getElementById('unityContainer');
var tempWidth = window.innerWidth - ( window.innerWidth * 0.0001 );
var tempHeight = window.innerHeight;
unityContent.style.width = tempWidth+'px';
unityContent.style.height = tempHeight+'px';

But when I open this in a browser in Portrait mode I get a black screen, while when I open it in landscape mode then it is working fine. And this happens in devices having screen size 6 inches and above only. On devices having smaller height the portrait mode opens fine and no black screen is shown.

Also if I hard code the tempHeight to 1500px then even portrait mode shows the canvas instead of black screen but then there is empty space on the screen above and below the canvas. What's more troubling is that the same code was working fine a few months ago in other projects.

Can Anyone Help me out with this please? Have been stuck on this for some time now.

Upvotes: 1

Views: 887

Answers (2)

Sufyan Cheema
Sufyan Cheema

Reputation: 1

I've faced the same problem. In my case, switching colorspace from linear to gamma solved the problem.

Upvotes: 0

TheLazyIndianTechie
TheLazyIndianTechie

Reputation: 31

Have you just tried setting the width and height to a 100% of screen and are able to reproduce the issue?

If it works with this, then your canvas is getting drawn outside the bounds, else there's something else wrong.

Upvotes: 0

Related Questions