Problem when swiping over HTML elements

Post reply

❤Follow Topic(2)

0 favourites

9 posts

From the Asset Store

Dolphin Jump - HTML 5 - Construct 3

$9 USD

Get ready to dive into a sea of endless excitement with "Dolphin Jump," the thrilling new game that puts you in control

clarkgame

- ChesVCF
- - Joined 15 Aug, 2016
  - 38 topics • 165 posts
- 1
- 14 Oct, 2017
- Quote
Hello, I am having a weird problem when swiping over an HTML object. It is difficult to explain what is happening, so I prepared a sample capx and I will give you some steps to reproduce the "bug":

Sample capx

You will need Nandynho 's HTML|IFrame Plugin (same version as mine)

Steps to reproduce:

This "bug" only happens when you run the app on mobile, but you can simulate a mobile device with Chrome:
- Run the project with Google Chrome
- Open the Chrome DevTools (hit F12)
- Toggle the device toolbar (Ctrl + Shift + M)
- In the HTML code (right), open the <body> tag and select the second <div> (the one with the id="c2canvasdiv")
- Under the HTML code, you can see the (css) style settings of that element, add the property "overflow: auto;" just as in the capture:
Now it behaves the same way it behaves on mobile (exporting via cordova):
- Try to swipe to the right over the black text (inside the HTML element)
- You will swipe to a black "page" with red text, this isn't expected to happen
- Notice that the black area is scrollable, you can scroll both in the x and y axis; the project is in the top left fourth (not expected to happen)
There is only one way to successfully swipe: swiping over non-HTML content (for example, at the bottom of the layout). This is how it is expected to work. Of course, if you don't do all the steps above, it will also work as expected, but the steps above reproduce the project's behaviour on mobile.

Does anybody know how to solve this issue? Thank you for your help!
- ChesVCF
- - Joined 15 Aug, 2016
  - 38 topics • 165 posts
- 1
- 17 Oct, 2017
- Quote
Anybody??
- htmlgames
- - Joined 5 Aug, 2017
  - 2 topics • 26 posts
- 1
- 17 Oct, 2017
- Quote
Doesn't find the 'HTML' plugin when loading your capx, even though I put the _HTML & iFrame folder in the plugins folder ?

I wonder if the issue is regarding onclick v ontouch events at a guess....
- ChesVCF
- - Joined 15 Aug, 2016
  - 38 topics • 165 posts
- 1
- 18 Oct, 2017
- Quote
htmlgames I downloaded the plugin from the official thread. Maybe it works if you download from there?
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads
- ChesVCF
- - Joined 15 Aug, 2016
  - 38 topics • 165 posts
- 1
- 20 Oct, 2017
- Quote
Bump
- htmlgames
- - Joined 5 Aug, 2017
  - 2 topics • 26 posts
- 1
- 20 Oct, 2017
- Quote
That one has 2 versions (one has (compatible) on the end of the folder). What is the final name of the folder you use for the plugins directory? (why the _ as well?)
- ChesVCF
- - Joined 15 Aug, 2016
  - 38 topics • 165 posts
- 1
- 21 Oct, 2017
- Quote
htmlgames I use the version without "[compatible]" on the end of the folder, the plugin's directory root is "...\Construct 2\exporters\html5\plugins" and I don't know why the author put a _ in the folder's name. Did you manage to open the capx?
- ChesVCF
- - Joined 15 Aug, 2016
  - 38 topics • 165 posts
- 1
- 22 Oct, 2017
- Quote
Ok after many tests I figured out that the problem is that JavaScript touch events have preference over Construct 2 touch events (which I don't understand, as Construct 2 is JavaScript!). Is there any way to avoid this "preference"?

If you disable pointer-events, you can swipe as expected, but then you can't scroll or touch any button inside the HTML element... Any clue?
- ChesVCF
- - Joined 15 Aug, 2016
  - 38 topics • 165 posts
- 1
- 23 Oct, 2017
- Quote
Now I'm really clueless. This is the problem (you don't need neither the capx posted above nor any Plugin): in my Project, there is an HTML element. If you touch that HTML element, everything is fine as long as you don't move your finger. At the moment you move your finger just one pixel, "Touch -> Is in touch" condition will stop triggering, and I need this to be true (because it actually is!).

If you want to check this by yourself, you can do it with TextBoxes or Buttons (as they both are HTML elements too): put a big TextBox and a black sprite next to it. If "Touch -> Is in touch" -> "Sprite -> Rotate 1 degree clockwise". You will notice the sprite will stop rotating as soon as you move your finger in the TextBox area. You can simulate touches in Chrome by hitting F12 and then Ctrl + Shift + M, otherwise you won't see the bug.

Is there any walkaround or do I have to report it as a bug?

Thank you for your help!