When iframed, touch coordinates are off by a huge margin

Report Construct 2 bugs here.

Post » Wed Feb 28, 2018 10:13 am

Problem Description
When a C2 game is played in an iframe, the touch coordinates received by the game are very different from actuals. This happens on mobile only, not desktop. Use r254.

Attach a Capx
https://static.gamezop.com/yashash/scir ... s-bug.capx

Description of Capx
Uses touch events to print the X, Y coordinates of user input. Uses no third-party plugins.

Steps to Reproduce Bug
  • Create a simple HTML file which has an iframe that runs localhost:50000 (assuming you are running C2 projects on port 50000 locally)
    Code: Select all
    <iframe src="http://localhost:50000" width="100%" height="100%"></iframe>

  • Host this file locally (say at port 8000)

  • Open the given capx file, and run the project (there's a dot in the center of the screen - tapping this should print X and Y coorindates close to 360X and 640Y)

  • Open developer options (Ctrl + Shift + I on Chrome) and enter mobile mode. Run localhost:50000 again and tap on the dot. The coordinates are printed correctly (the coordinates will be roughly 50% of the device size set in your Chrome Dev Tools, which also is a little weird, giving that scaling is letterbox).

  • Now run the iframe page while still in mobile mode (localhost:8000 in this example). This will open the game in an iframe. Tap on the dot now and the coordinates printed are totally off.

Observed Result
When the game is run in an iframe, touch coordinates received by game are wrong.

Expected Result
The game should receive same X & Y coordinates irrespective of whether or not it is iframed.

Affected Browsers

    Please note, the problem has to be reproduced in the mobile mode on each of these browsers.

  • Chrome: YES. Version 64.0.3282.167 (Official Build) (64-bit)

    This issue doesn't come up if the project is exported from r253.

  • FireFox: No
  • Internet Explorer: Unsure.

Operating System and Service Pack
Windows 10 Home, Version 1709, OS Build 16299.248

Construct 2 Version ID
253 and 254.
Posts: 7
Reputation: 239

Post » Wed Mar 07, 2018 1:45 pm

I can reproduce, but you can work around it by simply pasting the meta viewport tag of the framed page to the parent page, i.e.:

Code: Select all
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />

As it is, you have a mobile viewport nested in a non-mobile viewport, which is kind of an odd thing to do and probably kicks in some weird browser compatibility stuff. I'm not sure why this results in the touch positions being off, but given it's easy to work around using a mobile viewport (which I guess you ought to have anyway for pages viewed on mobile) do you still think this should be fixed?

I mentioned previously we've never had such issues on other arcades like our own Scirra Arcade, Newgrounds, Kongregate etc. so I assume they all use the mobile viewport for both pages.
Scirra Founder
Posts: 25,282
Reputation: 200,833

Return to Bugs

Who is online

Users browsing this forum: No registered users and 1 guest