Samsung Internet Browser Canvas Resolution Wrong

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.

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

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);
2 Likes

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

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

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

  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

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.

2 Likes

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