IOS Iframe positioning causes touch to fail

0 favourites
  • 6 posts
From the Asset Store
All popular touch mechanics - scrolling, zooming, swiping
  • Problem Description

    When embedding within an iframe on ios 7 the touch behaviour doesn't work as expected when the iframe is positioned further down the page using padding, margin or absolute positioning.

    Using this exact same method worked fine when using a previous versio (157 i think) so it may be a version issue. that original game I created still works now so I'm fairly sure it's a Construct bug rather than a general ios issue.

    Attach a Capx

    Description of Capx

    I have created a capx and include a link to the exported project that is a simple two layout touch test. Touching anywhere within the iframe should change the text to touch, clicking on the enter sprite should take you to the second layout. This works fine via Mouse and on android touch. On chrome and safari and ios it doesn't, the touch fails to fire further down the screen (byt the amount the iframe has been moved by). I've tried using absolute positioning, margin, and padding to no avail. I've included index.htm in the export folder to show how i have used the iframe.

    Steps to Reproduce Bug

    • export a touch enabled project
    • place the project within an iframe (see index.htm)
    • open in ios and you'll see that the iframes shows correctly but touch events don't fire towards the bottom of the iframe (byt the amount of pc the iframe has been moved down the page by)

    Expected Result

    Touch event should fire over the entire iframe / construct project

    Affected Browsers

    • Chrome: (YES on IOS)
    • Safari: (YES on IOS)
    • FireFox: (NO)
    • Internet Explorer: (NO)

    Operating System and Service Pack

    Win 8.1

    Construct 2 Version ID


  • Has anyone else been able to recreate this?

    Currently planning on rebuilding an entire game in an older version.

  • iOS has bugs with iframes, which you can usually work around by adding the scrolling="no" noresize="noresize" attributes to the iframe tag. Does that fix it?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • i am having the same issue, scrolling="no" noresize="noresize" does not fix the problem. Are there any other work around for this? I need to fix this asap


  • I use a little work around to fix the issue.

    use normal template with fullscreen off(for my setup)

    set the iframe width/height to 100%

    set the margin of the c2canvasdiv to your liking

    hope it helps! thanks

  • Thanks for this, for this project I ended up making the canvas bigger so it could start from 0,0. I'll investigate more once I have some time and report back.

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