Fullscreen problems with HTML5

Hello everyone, I’m trying to make a summary of the situation (updated to 4.16) of fullscreen problems when playing a project packed for HTML (I’m testing on Firefox 53.0.3 64 bit)
How I’ve set up the test project:

  • Create an FPS project for mobile
  • Pack for html and try on browser
  • Click on Fullscreen button
  • See the project going fullscreen
  • Press ESC to exit from fullscreen
  • See the project viewport is corrupted (sometimes seems it’s not re-scaled and moved aside; sometimes seems it change the FOV of the camera as if it become a fisheye)

Test 1

In project setting → Input I un-tick “Enable FOV scaling”

Pack again and test on browser
Result: after exit from fullscreen the viewport is corrupted

Test 2

Go to the webpage of the Epic Zen Demo and try it: it goes in fullscreen and back without problems, so open the page source (in Firefox the shortcut is Ctrl+U), copy all and paste it into the basic notepad (or other similar software)
Take the previous packed project (the one used in Test 1) open the HTML file with the basic notepad (or other similar software)
I use a software that help to compare easily scripts in any languages: looking through our html I’ve seen that from line 366 there are some controls over fulscreen methods; comparing to the Epic Zen Demo page source the only difference in that zone is due to 395/397 lines (surely they aren’t standard number lines for any kind of projects but is just to give a reference where to look around)

I 've tried to simple copy them in my test project, save the html and test it again
Result: after exit from fullscreen the viewport is corrupted

Test 3 and 4

Take the previous packed project (the one used in Test 1 and 2) open the HTML file with the basic notepad (or other similar software):


go where you’ll find

// When entering fullscreen mode, should UE4 engine resize the canvas?
// 0=No resizing (do it manually in resizeCanvas()), 1=Resize to standard DPI, 2=Resize to highDPI
Module['UE4_fullscreenCanvasResizeMode'] = canvasWindowedUseHighDpi ? 2/*HIDPI*/ : 1/*Standard DPI*/;

(it’s 394-396 lines from my html) if you change the value

canvasWindowedUseHighDpi ? 2/*HIDPI*/ : 1/*Standard DPI*/

you get different results:

  • with 0 when you go in fullscreen it
    won’t change the dpi so basically
    you’ll have a drop of quality but
    after coming back from fullscreen the
    viewport isn’t corrupted
  • with 1 or 2 when you go in fullscreen
    it adapt the dpi to the new dimension
    so basically you won’t have a drop of
    quality (or a little if you use 1)
    but after coming back from fullscreen
    the viewport is corrupted

go where you’ll find

// Fullscreen scaling mode behavior (export these to Module object for the engine to read)
// This value is one of:
// 0=NONE: The same canvas size is kept when entering fullscreen without change.
// 1=STRETCH: The canvas is resized to the size of the whole screen, potentially changing aspect ratio.
// 2=ASPECT: The canvas is resized to the size of the whole screen, but retaining current aspect ratio.
// 3=FIXED: The canvas is centered on screen with a fixed resolution.
Module['UE4_fullscreenScaleMode'] = canvasWindowedScaleMode;

(it’s 386-392 lines from my html) if you change the value

canvasWindowedScaleMode

you get different results:

  • with 0, 1 or 2: it uses different way to adapt the viewport to all the screen, but after coming back from fullscreen the viewport is corrupted
  • with 3 (as it says in the description) it doesn’t change the dimension of the viewport, it just center it in the screen with black as background, but after coming back from fullscreen the viewport isn’t corrupted

I tried to tweak other options but I haven’t found other settings useful to reach different results from fullscreen (and my knowledge oh HTML is too low to find any other clues, so I’m still looking to find a way to go fullscreen and back without having quality drop in fullscreen, or corrupter viewport back from fullscreen.

Hi ,
thanks for the quick answer!

  1. I hadn’t tried to make all the tests on different browser than Firefox 53: I saw that Chrome 58 had the same problem so I started investigate directly using the browser you suggested during the release

just opened

fullscreen

back to windowed with the distortion

  1. [dxdiag attached][4]

Issue 0

It doesn’t seem the time matter: I can back windowed immediately or 5 minutes after, it’s always distorted

Issue 1

In this case I just tried to switch off that Fov setting (as in my screenshot)

Issue 2

it’s not what I was meaning: these issues are not the “causes” to the problem, the problem is always there and all these tests were made to try to fix it (with no success), so the problem was not caused by copying the script from Epic Zen Demo: I tried to fix it looking at the differences between my test project and your demo, between all the differences that one in my screenshot was the only one I understood related to the fullscreen, so I tried to copy it on my project, but it didn’t fix the problem (reeeeeally optimistic, am not I?)

Issue 3

I changed this

// When entering fullscreen mode, should UE4 engine resize the canvas?

// 0=No resizing (do it manually in resizeCanvas()), 1=Resize to standard DPI, 2=Resize to highDPI

Module[‘UE4_fullscreenCanvasResizeMode’] = canvasWindowedUseHighDpi ? 2/HIDPI/ : 1/Standard DPI/;

into this

// When entering fullscreen mode, should UE4 engine resize the canvas?

// 0=No resizing (do it manually in resizeCanvas()), 1=Resize to standard DPI, 2=Resize to highDPI

Module[‘UE4_fullscreenCanvasResizeMode’] = 0;

or this

// When entering fullscreen mode, should UE4 engine resize the canvas?

// 0=No resizing (do it manually in resizeCanvas()), 1=Resize to standard DPI, 2=Resize to highDPI

Module[‘UE4_fullscreenCanvasResizeMode’] = 1;

or this

// When entering fullscreen mode, should UE4 engine resize the canvas?

// 0=No resizing (do it manually in resizeCanvas()), 1=Resize to standard DPI, 2=Resize to highDPI

Module[‘UE4_fullscreenCanvasResizeMode’] = 2;

Issue 4

0,1 or 2 provide the same distortion I posted on this reply at the beginning

Hello Hainzgrimmer,

I am going to go through each issue individually. But overall I was unable to reproduce most of the issues you have described on our end. I have some general questions for you, as well as some specific to each issue which I will address separately.

  1. I tested these issues using the 4.16.1 binary build of our engine (From our Epic Games Launcher) and tested the HTML via Firefox 64 bit (53.0). Did these HTML 5 issues occur for you in other versions of the engine or Firefox?
  2. Do you have any screenshots of the distortions you are experiencing?
  3. Could you provide your DxDiag?

Issue 0: Initial bullet list

Following the repro steps, you provided in this initial steps did not reproduce your issue on our end. On my end, there were no visible distortions. I have specific questions for these steps.

  1. How long after making the project fullscreen did you close it?

Issue 1: Untick the enable FOV scaling in Project Settings

I was uanble to reproduce the issue with the steps for this issue.

  1. Were there any other settings changed other than FOV scaling for testing this issue?

Issue 2: Using the Epic Zen Demo code

Copying the code from the Demo into the project I created did not cause any distortions.

  1. Did you change any values in the code that was copied over?

Issue 3: Change the value of canvaswindowusehighDPI

Following the steps provided did not reproduce the issue on our end.

  1. Where specifically did you change the value in the code that caused the issue?

Issue 4: Change value of canvasWindowScaleMode

I was able to see some distortion when the value was set to 1 (Screen became squished) but using a value of 2 did not cause any distortion.

  1. When the value is set to 2 on your end, what is the distortion you are seeing?

Thanks!

Hello again Hainzgrimmer,

I was to reproduce this issue after following the additional information you provided. You can track the issue here:

You can track the report’s status as the issue is reviewed by our development staff. Please be aware that this issue may not be prioritized or fixed soon.

Thanks so much, found it. This workaround works for me as well.

Same issue here. Fixed by setting UE4_fullscreenCanvasResizeMode to zero, no distortion at all. Firefox version 53.0.3

I have the same issue, but can’t find this setting. It would be awesome if you could give some more details about where to find it, thanks.

Hi, as @Hainzgrimmer reported in Test 3, it is close to line 392, in the html5 generated file. It is usually named: projectname-HTML5-Shipping.html

Find JavaScript piece of code at this file and it shows:

Module['UE4_fullscreenCanvasResizeMode'] = canvasWindowedUseHighDpi ? 2/*HIDPI*/ : 1/*Standard DPI*/;

You have to set:

Module['UE4_fullscreenCanvasResizeMode'] = 0;

Hope it serves well!