Games receive multiple touch events when in iframe on mobile

Problem Description

When a C2 game is placed in an iframe, the game receives double touch / tap events each time the user taps. This happens on mobile only, not on desktop.

Attach a Capx

https://static.gamezop.com/yashash/scir ... h-bug.capx

Description of Capx

Uses the touch and tap events to update a text view that displays the touch and tap counts. 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) <iframe src="http://localhost:50000" width="100%" height="100%"></iframe> [/code:8pspvof6]
• Host this file locally (say at port 8000)
• Open the given capx file, and run the project (each time you tap on the canvas, the touch and tap count should increase by 1)
• Open developer options (Ctrl + Shift + I on Chrome) and enter mobile mode. Run localhost:50000 again and tap on the page. The counts still increment by 1 on each touch / tap. If you tap fast, you'll see tap counts fall behind, but I could still live with that.
• 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 page now and each time you tap, the count increases by 2.

Observed Result

When the game is run in an iframe, C2 receives 2 touch events for each time a user taps on the game page.

Expected Result

C2 should register only one touch for each time the user taps on the page. Games often always run within iframes (so that the parent page can have ad scripts / other games etc.).

Consider a very simple example - if I have a shooting game and the player has a total of 5 bullets, with one fired on any touch end. If the game is in an iframe, each user tap will exhaust 2 bullets, while it should exhaust 1.

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)
• FireFox: YES. Version 59.0b11 (64-bit) - Developer Edition. Here, you notice a very interesting problem. When the game is run in an iframe in the mobile mode, each touch end increases the touch count by 2, but the tap count only increases by 1. The given capx was saved with r253. If you run the same project with r237, you notice this same behavior on Chrome as well - tap count increases by 1 and touch counts increase by 2. I've written to C2 Support email about this problem, but I never got a clear solution. For the longest time, I was using tap events (it has its own drawbacks, but there are a few maniacal workarounds) in my game instead of touch. But as you see, in the new release, even tap counts increase by 2 when the game is in an iframe. As a result, I can't update to the latest C2 builds.
• Internet Explorer: Sorry, but I honestly have no idea how to open mobile mode on this thing.

Operating System and Service Pack

Windows 10 Home, Version 1709, OS Build 16299.248

Construct 2 Version ID

237 and 253.

I can reproduce. It looks like for some reason only in an iframe, the browser is firing a compatibility mouse event right after the pointer event. I don't know why this doesn't happen when not iframed - it must be some weird browser compatibility quirk. Since the Touch plugin's 'Use mouse input' property is enabled, this also triggers touch events. If you disable that property it works around it, since the extra mouse event is ignored. So that's the best thing to do in the short term.

Detecting compatibility mouse events is actually pretty tricky - Chrome provides a way, but I don't think Firefox supports it yet, so I'm not sure we can completely fix this. Still, Chrome is used far more on mobile so it might go a long way to helping.

FWIW the tap counts fall behind because two quick taps in succession will trigger "on double tap" instead.

OK, this should be worked around in Chrome for the next build, and we've patched C3 as well. It uses InputDeviceCapabilities which is currently only supported in Chrome - I don't think we can easily detect these events in other browsers.

Thanks, Ashley. Two quick questions for you:

• Using the "is on mobile device" event, is it possible to disable the "Use mouse input" property only if the game is being played on a mobile phone? I can't seem to find the right action for it and blanket disabling would render the games useless on desktops.
• In r237, the issue with double touch events can, sort of, be worked around using tap. However, in r253, even taps increase by 2 when iframed. Since I am trying both in the same Chrome version, there must have been some change in C2 around the way you receive user input? This issue doesn't happen when games built on other frameworks are iframed. Do you plan to introduce a more stable fix to this in the medium term?

OK, this should be worked around in Chrome for the next build, and we've patched C3 as well. It uses InputDeviceCapabilities which is currently only supported in Chrome - I don't think we can easily detect these events in other browsers.

Thanks, Ashley. Meanwhile, can you please help me understand this:

[quote:24c0jheq]Using the "is on mobile device" event, is it possible to disable the "Use mouse input" property only if the game is being played on a mobile phone? I can't seem to find the right action for it and blanket disabling would render the games useless on desktops.

Using the "is on mobile device" event, is it possible to disable the "Use mouse input" property only if the game is being played on a mobile phone? I can't seem to find the right action for it and blanket disabling would render the games useless on desktops.

This kind of detection generally isn't correct: you can get desktop devices with touchscreens, and mobile devices with a mouse attached, so in some cases you'll either disable mouse input that the user wants to use, or leave mouse input enabled (and therefore risk double-triggers) where they want to use touch input. You can't simply assume that "is mobile" is the same as "uses touch input".

[quote:1kicopng]In r237, the issue with double touch events can, sort of, be worked around using tap. However, in r253, even taps increase by 2 when iframed. Since I am trying both in the same Chrome version, there must have been some change in C2 around the way you receive user input?

I checked, and our last change to the Touch plugin was in June 2017, before the release of r237. So I'm not sure what could have impacted this.

This kind of detection generally isn't correct: you can get desktop devices with touchscreens, and mobile devices with a mouse attached, so in some cases you'll either disable mouse input that the user wants to use, or leave mouse input enabled (and therefore risk double-triggers) where they want to use touch input. You can't simply assume that "is mobile" is the same as "uses touch input".

In that case, what's the best way to make use of the Uses mouse input property on C2? The iframe issue goes away on disabling mouse input, but doing that also makes my game incompatible with non-touch devices. Any workaround for this?

I checked, and our last change to the Touch plugin was in June 2017, before the release of r237. So I'm not sure what could have impacted this.

That's okay, I think. You mentioned the next release fixes this. I'll wait till the next release then.

This should be fixed as of r254. As mentioned it probably doesn't help on Firefox for Android, but AFAIK there's no clear way to detect compatibility touch events in Firefox. Besides the vast majority of Android browsing is done with the Chromium engine which the fix does work for, so it should resolve the issue in the vast majority of cases.

Thanks for the quick turnaround, Ashley. While r254 fixes this issue, it introduces a new one at the same time.

Here's a .capx to help you reproduce: https://static.gamezop.com/yashash/scir ... s-bug.capx

There's a dot on the screen placed at 360,700. When you run this file (again on mobile mode), and tap on the dot, the screen shows the X and Y coordinates of the tap received. This works fine when the hosted file is the game's index file.

When iframed, however, the coordinates are totally off. The X and Y coordinates of the tap are off by a huge margin. This wasn't happening in r237.

Please let me know if you have any trouble reproducing the issue.

Hi!

I'm facing too the issue described by agarwalyashash.

In particular I've noticed that touching an object trigger the "click" and "touchstart" events on my iframe.

But the workaround suggested doesn't fix the problem to me.

This occur only on Chrome for Android and Native Android Browser.

Safari works fine.

I tried disable "Use mouse input" option but it doesn't solve the issue :(

I'm working with Construct2 r255.

Do you have any other guess??

Let me known if other info is needed.

Thank you!!