[r202] Scale problems on Mobile (Mobile Safari/Chrome)

Hi there!

I've been having some troubles on exporting some games for both web and mobile web. The games are working quite fine on PC web browsers (IE, Chrome, Safari, Firefox). Although, when it comes to the mobile browsers, some weird stuff happens. First of all, the scale changes. But it's not the whole game scales, just the textures. If you place a button on the screen, it's collider stays wherever it should be, so you can click it, but without seeing it. It zooms like 3~4x on the upper left corner.

Capx Link: dropbox.com/s/dr8ogg979ak8wm0/_testing.capx?dl=0

On this .capx, I was able to reproduce this error. If you export it on the 800,600 resolution and open it on iPad 4's Safari (and some other ipads aswell), you can see that the bug happens. But exporting into some other resolutions (such as 880,660 or 720,540) doesn't have the same effect.

I've been trying on iPads 3/4/5, Nabi Dreamtab (Android 4.4.2) and Geeksphone KEON (Firefox OS 1.3).

Edit: I've been trying some of my old games and it has been happening in many of them (it wasn't happening before).

Steps to Reproduce Bug

Step 1

Export this project to HTML5 on 800x600 resolution.

Step 2

Open it on iPad 3/4/5 on Safari Browser.

Then, to see the difference

Step 1

Change the size of the project, layout and background image to either 720x540 or 880x660.

Step 2

Export the project to HTML5 again.

Step 3

Open it on iPad 3/4/5 on Safari Browser.

Observed Result

It seems to be bugging just some specific resolutions. It has happened to me on 800x600, 940x570 and 900x540.

Expected Result

It should open normally, even if it is bigger than the screen (you know, scrollbars).

Affected Browsers

On Mobile Browser:

Chrome: (YES)

Firefox: (NO)

Internet Explorer: (Didn't test)

Safari: (YES)

Operating System and Service Pack

Windows 7 Service Pack 1

Construct 2 Version ID

r202 (r200, r195 aswell)

I could reproduce this on an iPad Air 2 running iOS 8.3 using preview-over-wifi - no need to export. I am certain this is a bug in Safari. It works perfectly in Chrome for Android, but the combination of fullscreen mode "off" and high-DPI mode on makes Safari size the canvas too large. It seems Safari tries to apply some special-case sizing logic, which simply breaks it. I literally wrote code which was working like this:

set size to width + 1, height + 1: appears correctly but off-by-one

set size to width - 1, height - 1: appears correctly but off-by-one

set size to width, height: appears double size

set size to width * 2, height * 2: appears double size, the same as the "width, height" size!

Since it appears to be impossible to set the correct canvas size, I've implemented a workaround for the next build: it turns off high-DPI mode on iOS if fullscreen mode is "off". You can do this yourself as a workaround - set high DPI off in project properties and it works correctly. Letterbox scale is not affected so one workaround is to use letterbox scale and display it in an iframe (which I'd recommend anyway - fullscreen mode "off" was invented before mobile devices and does not really work nicely for them).

I don't want to start a new thread regarding screen resolutions, and I'm not sure this is the right thread to ask, but I was wondering if 800x600 is the best native resolution for browser games? I really don't have a clue where to start with the native screen size, as there's soooooo many different answers on the web when I search.

Zynt - this is a closed bug report, it's the wrong place to ask. Besides C2 defaults to letterbox mode which defaults to the resolution of the device. The aspect ratio is a more important decision.