Jump to content

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

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...