[Solved] - Iframe on iOS is breaking game?

Get help using Construct 2

Post » Tue Jul 14, 2015 11:28 pm

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 solved-iframes-and-ios-devices_t89144?start=10 and I have tried adding scrolling="no" noresize="noresize" to the iframe, neither work. Anybody know a fix for this?
Last edited by twg on Wed Jul 15, 2015 8:56 am, edited 1 time in total.
B
51
S
18
G
2
Posts: 111
Reputation: 4,611

Post » Wed Jul 15, 2015 8:56 am

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.
B
51
S
18
G
2
Posts: 111
Reputation: 4,611

Post » Wed Jul 15, 2015 9:02 am

Thanks for the info.
B
36
S
10
G
4
Posts: 250
Reputation: 7,963

Post » Mon Oct 26, 2015 2:55 pm

twg wrote: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!
B
5
S
1
Posts: 6
Reputation: 404

Post » Tue Feb 16, 2016 7:33 pm

This option worked better for me.

Rather than using an iFrame use Object, Embed.

Code: Select all
          <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>
B
14
S
2
Posts: 67
Reputation: 2,044


Return to How do I....?

Who is online

Users browsing this forum: dop2000, Kyatric and 4 guests