Treehouse: Grow your CSS skills. Land your dream job.

iframe not working on iphone

  • # April 29, 2011 at 8:06 am


    I’ve basically built a website for my mate, she wanted a horizontal scrolling gallery which stays lock in the same area (if that makes sense). So basically I built the gallery using Iframe which does excatly what she wanted. However once I uploaded the website I acessed it on my ipod touch and the gallery doesn’t move side to side which is very annoying as it seems to work fine everywhere else. I’ve tried two finger scrolling that doesn’t work at all.

    Any suggestions on how to resolve this issue?



    # April 29, 2011 at 1:57 pm

    Hey mini! I can’t solve your horizontal scrolling issue, but I can suggest using media queries to change the gallery to be a vertical one for smaller devices. Should just take a few straight-forward changes to some of your gallery tags in your CSS.

    # April 29, 2011 at 2:33 pm

    That’s pretty epic =)
    It does make a lot of sense to use that to fix the problem (and quick) But I would like to keep the same style for the PC and mobile…

    Here’s the website if you want to see what I excatly want (it’s pretty basic) =)

    Thank you for the heads up about Media Queries =)

    # April 29, 2011 at 2:50 pm

    Instead of an iframe, why don’t you just use a div with a fixed height and width? Surely that is the better way to go.

    # April 29, 2011 at 3:39 pm

    That could also work but I’ve looked into the issue and I have found out I could just use frames … Apple seems to have support for this so I’ll give it a try =)

    # April 30, 2011 at 8:48 am

    frames are dead

    # April 30, 2011 at 9:31 am

    This will work. Note, not the one that is js inhanced, but all the others work fine.

    # April 30, 2011 at 1:44 pm

    @ Wolfcry911 I know frames are dead but Apple make it so akward with what you can and can not do on it’s devices that you have to revert to old skool shizzz. =/

    @Eric thank you Eric, one random question … like on iframe can I hide the scroll-bar using a little bit of CSS black magic? =)

    # May 22, 2011 at 5:22 pm

    Fixed btw just to let help anyone all you do is

    changed the overflow on the CSS to auto so like…



    # September 27, 2012 at 1:18 am

    User csdco ( has provided a simple answer that solved the issue for me.

    It’s much easier to control overflowed divs than it is iframes, and the scrolling + blank content issues are working all the way back to iOS 4, where previously I wasn’t even able to get the 2 finger scrolling to work (in iframes).

    It goes something like this:


    # May 12, 2014 at 9:33 am

    try to add CSS3 property [ -webkit-overflow-scrolling:touch; overflow:auto;] to the parent container. Worked fine!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.