Samsung Internet Browser Canvas Resolution Wrong

[BenUnbnd]

Hi, I’m noticing an issue where the canvas resolution on Samsung Internet Browser is wrong on Galaxy phones.

Here’s the canvas element on chrome, with the device resolution set to 1520x720:

And here’s the canvas element on samsung internet, with the same device resolution:

Once I’ve loaded the app in Samsung Internet, if I rotate my phone landscape and rotate back to portrait the issue is fixed. It looks like it’s being set wrong initally.

This is also causing text elements that are apart of the screen to appear very small, even after correcting the resolution via scripts. Is it possible to refresh / update the screen component after updating the canvas resolution?

Thanks.

[yaustar]

Can you try the non iframed version of a published build as shown here please? Stretched image on iOS

[BenUnbnd]

The issue is happening on a build that was download and self hosted, so maybe the browser is passing the wrong info when the canvas is first created.

The temporary fix that worked for me was to run this code on initialize:

var actualWidth = window.innerWidth * window.devicePixelRatio; 
var actualHeight = window.innerHeight * window.devicePixelRatio; 

this.app.graphicsDevice.resizeCanvas (actualWidth, actualHeight);

[pekarnik]

Hello! Do you fix problem? your code help, but it dont get needed resolution in samsung browser(

[BenUnbnd]

I ended up turning off device pixel ratio in the editor, and calculating it myself based on if the browser was Samsung or not.

[yaustar]

The pixel device ratio caused this issue? That’s really bizarre

[KpoKec]

1. while loading - manually switch to pseudo fullscreen (very fast swipe bottom-top) - no problem
2. in browser setting switch off “page scaling” - no problem
3. switch from code to real fullscreen - no problem
   In others cases we have vertical 2x-3x stretch

[BenUnbnd]

Sorry my memory was wrong, device pixel ratio is enabled in the editor. Here’s the code I’m using to check Samsung Browsers:

var ResolutionFixer = pc.createScript('resolutionFixer');

ResolutionFixer.prototype.initialize = function() {
    if(navigator.userAgent.match(/SAMSUNG|SGH-[I|N|T]|GT-[I|P|N]|SM-[N|P|T|Z|G]|SHV-E|SCH-[I|J|R|S]|SPH-L/i))  {
        setTimeout (this.fixResolution.bind (this), 0);
    }
};

ResolutionFixer.prototype.fixResolution = function () {
    var actualWidth = window.innerWidth;
    var actualHeight = window.innerHeight;
    
    this.app.graphicsDevice.resizeCanvas (actualWidth, actualHeight);
};

This was working last time I tested it, haven’t tested recently. Also I think the bug only appears when the phone is set to HD+ or FHD+. QWHD+ seems to be working without needing this fix.

[pekarnik]

I think its because in samsung internet browser, by default set “Page scalable mode”(not sure how it on english).

[KpoKec]

After today updating browser fullscreen not worked. Aspect bug appears again.

1st - samsung internet (v12.1.1.36)
2nd - Chrome

[LeXXik]

I have a Samsung device. Do you have a simple project that shows the stretching, I could try?

[KpoKec]

@LeXXik
Simply add to index.html in build inside body section

	<script type="text/javascript">
		function fullScreen(element) {
		  if(element.requestFullscreen) {
			element.requestFullscreen();
		  } else if(element.webkitrequestFullscreen) {
			element.webkitRequestFullscreen();
		  } else if(element.mozRequestFullscreen) {
			element.mozRequestFullScreen();
		  }
		}
		var html = document.documentElement;
		fullScreen(html);
    </script>
<!-- /FULLSCREEN SAMSUNG BROWSER -->

samsung internet (v12.1.1.36)

[LeXXik]

Hmm, I have a different result.

Samsung Internet, v12.1.1.36 (BETA)

Normal screen and full screen:

Edit: above screenshots are with device pixel ratio disabled.
Adding 3 snaps with device pixel ratio enabled for comparison:

1. Initial load > 2. Full screen > 3. Return from full screen
   
   
   >
   
   >
   
   
   I see the font became blurred after returning from full screen, but it is probably another issue.

[KpoKec]

UI screen bugged, not 3D objects

[LeXXik]

It is a 2D Screen:

[KpoKec]

Create 5-10 images and anchor it to different points. And check again.

[LeXXik]

Yes, I was able to reproduce:

1. Initial load > 2. Full screen > 3. Return from full screen
   
   
   >
   
   >
   

Interesting to note, that the images become normal, after going to full screen.
Sample project: link

[KpoKec]

This is needed user tap.