[Solved] - Iframe on iOS is breaking game?

I have a game that works fine going to the exported index.html page, but if I load the game into an iframe on a page and load it in Safari, it breaks the following things.

1. Music just randomly stops playing

2. Normally if you start the game in portrait, then turn to landscape it is a responsive design and scales accordingly with a little zoom and vice versa, but when in an iframe, you turn the device to landscape then if you turn back to portrait, its like it wont trigger Browser>is portrait events. so it never zooms back out. I have tried putting other events here, like browser>is landscape>create sprite, browser>is portrait> destroy sprite, but you turn it back to portrait and it never triggers anything.

This is happening on Safari in iOS 8.3, I have tried on a 4s and 6. Weird thing is it doesn't happen on Chrome for Android or iOS, only Safari.

I have tried the fix mentioned here and I have tried adding scrolling="no" noresize="noresize" to the iframe, neither work. Anybody know a fix for this?

Ok I got everything working, basically doing the same thing as mentioned in the link I posted above, but I couldn't get it to work with that method so I just did it manually. After I exported my game I opened the index.html and replaced the html,body css attributes with

html, body {

background: transparent !important;

color: transparent !important;

background-color: transparent !important;

position: absolute;

top: 0;

left: 0;

right: 0;

-webkit-backface-visibility: visible;

overflow: hidden;

touch-action: none;

-ms-touch-action: none;

}

Kind of a pain to have to go in and put that in every build after export but oh well it works.

Thanks for the info.

Ok I got everything working, basically doing the same thing as mentioned in the link I posted above, but I couldn't get it to work with that method so I just did it manually. After I exported my game I opened the index.html and replaced the html,body css attributes with

html, body {

background: transparent !important;

color: transparent !important;

background-color: transparent !important;

position: absolute;

top: 0;

left: 0;

right: 0;

-webkit-backface-visibility: visible;

overflow: hidden;

touch-action: none;

-ms-touch-action: none;

}

Kind of a pain to have to go in and put that in every build after export but oh well it works.

thanks,,, awesome info!

This option worked better for me.

Rather than using an iFrame use Object, Embed.

          <object data="index.html" width="100%" height="100%">
    <embed src="index.html" width="100%" height="100%"> </embed>
    Error: Embedded data could not be displayed.
</object>[/code:n0dtxq51]

Just wanted to confirm the excellent tip from —

I was pulling out my hair trying to solve sizing and orientation issues for a C2 game running within an iframe on iOS. When I switched to <object> tag approach all my problems went away!