Sign in to follow this  
seejay92

iOS iframe error and possible solution

Recommended Posts

Hi all,

 

Whilst creating a game for a client, I came across a bug with responsive CSS iFrames, where the frame wouldn't obey the CSS applied, and expand past the parent ONLY on iOS devices, so I created a demo to try to find the cause (see iframe example at bottom). Looking at the forums, it appears there has been a few unanswered posts on the topic, so I thought I would give it an attempt myself. I got nowhere!

 

...But after doing some surfing on iOS iframes, I found a semi-related article at: https://www.magnolia-cms.com/blogs/christopher-zimmermann/detail~@strategies-for-the-iframe-on-the-ipad-problem~.html which raised a separate issue with scrolling.

 

Following one of their solutions, to use an <object> instead of <iframe>, this seems to have fixed the issue on iOS. I've got limited devices to test this on just now, but it appears to work on my pc browsers, mac, iPhone and 2 androids.

 

Apart from sharing my solution, I was just wondering what your thoughts were on the issue. Is this a problem that lies with the iFrame code on iOS, or is this something that Phaser could change to handle?  I've raised a github issue just incase. Does the solution seem to work on your devices, and is there any downsides to an <object> over an <iframe>?

 

Cheers as always!

 

-- Examples --

iframe example: http://seejay.co.uk/phaserios/iframe.html
object example: http://seejay.co.uk/phaserios/object.html

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.