[SOLVED!] iframes and iOS devices?!!

Hi, all!

I was wondering if anyone had any tips/tricks/suggestions for how to make iframes and iPads/iPhones play nicely together.

We embed our games on our site with iframes and it works great... EXCEPT with iOS devices.

• All of our games use the Touch Object
• Every other hardware/browser combination works fine in the iframe
• When a game is in an iframe, the iOS device doesn't seem to be activating the Touch Object.
• All the games work fine on iOS devices if they are NOT in an iframe.

At first, I suspected that it might be a Mobile Safari issue, however, I had the same thing happen using Chrome for iOS. Ugh.

As I don't want to leave the Jobsian-Fondleslab crowd out in the cold, I'd like to get this fixed if at all possible.

Thanks! :)

-John

Does it help if you have an event like:

+ On any touch start

-> Browser object: focus

Thanks for the suggestion, Ashley. Sorry to say, it didn't work.

The iframes don't seem to be receiving any touch input. If I tap the buttons in the iframe, the iPad offers to copy the iframe for me.

I did accidentally get a touch event to trigger once (and only once)on an iPhone(iOS7 & Safari). I was holding it vertically and pounding on the screen. The touch event triggered and then the browser freaked out (screen redraws of the iframe all over the place). As one would expect, it froze up after that. While finding new ways to crash Apple products is entertaining, it's not the sort of progress I was hoping for. :)

I have seen elsewhere that some coders are having issues with iOS and iframes in that they are not able to get the content inside the iframe to scroll. Possibly related? Yay Apple.

Any suggestions (short of "Android") definitely welcome!

Cheers,

John

Any update on this? I was just asked to make sure game will work in iframe on mobile.

Sorry to say, I've made no progress with this at all.

There seems to be an increasing amount of developers that are having problems with iOS and iframes (inability to scroll, iframe only partially being rendered, etc.). Despite the increase in reported problems, I've not seen any definitive solutions offered.

So, if you come across anything that might help, please let us all know! :)

Cheers,

-John

Hello! I have maybe found a solution for this. I use the css importer plugin (http://www.scirra.com/forum/plugin-css-import_topic62115.html) to be able to include an external css file in my builds, and in that file i have:

html, body {

     background: transparent !important;

     color: transparent !important;

     background-color: transparent !important;

     position: absolute;

     top: 0;

     left: 0;

     right: 0;

     -webkit-backface-visibility: visible;

}

It works for me, try it out!

I know this isn't helpful in your current situation but you really should advice your clients to never use iframes

You know, for future reference

johxn Thank you for bringing up this question. I'm having the same problem.

jeansson Thanks for the potential solution. Will definitely try this out *fingers crossed*

jn2002dk How else do you propose embedding an html5 game on a web page? I'd love to hear your suggested alternatives. I've been planning to use iframes because I thought that was our only option.

jeansson Thanks for the potential solution. Will definitely try this out *fingers crossed*

How it went?

jn2002dk good luck with suggesting anything to clients. I need to get iframe working for one pretty big important publisher. Their whole portals groups is based around iframes.

jeansson, I owe you a pint! <img src="smileys/smiley32.gif" border="0" align="middle" /> It worked!

Your solution should probably be made a STICKY (at least until Apple gets their act together).

Now... anyone have any clever ideas about curing iOS's horrific audio support?! <img src="smileys/smiley2.gif" border="0" align="middle" />

Thanks again, jeansson - you saved us a lot of hair-pulling & gnashing of teeth.

Cheers,

-John

How it went?

Unfortunately, I haven't been able to get it to work for me. Obviously something I'm doing wrong, so I'm going to have to re-check my work and try, try again ;)

I can confirm that using solution in this thread with .css import worked quite well for our client.

jeansson

Having the same problem, would try it out today hopefully. Also, generally, people playing my game on mobile devices are complaining or responnsiveness(also had the same issue playing on my galaxy tab-chrome browser) what could be casusing this? Works perfectly on laptops, I used iframe and the touchwrap plugin to have touch n mouse effects. thanks

The link to the game is my signature incase u want to check it out.

That CSS solution worked, thanks so much! I spent most of a morning trying to get swipe events working within an iframe for an animation, that CSS fixed it. Definitely sticky it.

divaweb Dasat

To get the iframe to work in ios Make sure you:

0. Install this CSS Plugin

1. Save the code below as a CSS file in notepad. Let's say I name the file "style.css"

html, body {

     background: transparent !important;

     color: transparent !important;

     background-color: transparent !important;

     position: absolute;

     top: 0;

     left: 0;

     right: 0;

     -webkit-backface-visibility: visible;

}

2. Import the css file into "Files" by right clicking the "Files" folder (located in "Projects" window)

3. Add this bit of code in events:

   System | On start of Layout > CSSImport | "style.css" (include brackets)

4. Click on the "CSSImport" object in the "Projects" window and make sure you add the CSS file name "style.css" to the "CSS filename" property box, like so:

<img src="http://i.imgur.com/c5Emg.png" border="0">

5. ????

6. Profit :)