IOS Iframe positioning causes touch to fail

Bugs will be moved here once resolved.

Post » Thu Mar 20, 2014 4:23 pm

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
https://www.dropbox.com/sh/04i7i4f21l3wovv/aM2FBAzhfg

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
164.2
B
4
S
1
Posts: 7
Reputation: 366

Post » Thu Mar 27, 2014 1:15 pm

Has anyone else been able to recreate this?

Currently planning on rebuilding an entire game in an older version.
B
4
S
1
Posts: 7
Reputation: 366

Post » Thu Mar 27, 2014 5:02 pm

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?
Scirra Founder
B
395
S
232
G
88
Posts: 24,371
Reputation: 193,762

Post » Mon Mar 31, 2014 4:20 am

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

thanks!
B
7
S
1
G
1
Posts: 15
Reputation: 530

Post » Mon Mar 31, 2014 6:14 am

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
B
7
S
1
G
1
Posts: 15
Reputation: 530

Post » Wed Apr 02, 2014 11:07 am

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.
B
4
S
1
Posts: 7
Reputation: 366


Return to Closed bugs

Who is online

Users browsing this forum: No registered users and 1 guest