0 Favourites

Problem when swiping over HTML elements

  • 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!

  • Anybody??

  • 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....

  • htmlgames I downloaded the plugin from the official thread. Maybe it works if you download from there?

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Bump

  • 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?)

  • 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?

  • 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?

  • 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!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)