Grow your CSS skills. Land your dream job.

IFRAME Problem -Works on All Browsers cept iphone but works in Safari on a computer

  • # January 16, 2012 at 2:54 am

    this is the weirdest thing I have ever seen. The frame loads fine with a scroll bar on all browsers including safari on a mac and on a pc, but when I view the page on the IPhone, the scroll bar does not appear, and cause of this, the frame in the iframe throws off all of my slices and makes the page look like crap….
    please any ideas would be greatly appreciated….

    the website is: http://www.motmmusic.com

    thank you,
    Mikey P

    # January 16, 2012 at 7:00 am

    When browsing on an iPhone a scrollbar only appears when your scrolling within the element, for instance if you grab your index and middle fingers and try scrolling in the iframe it will display a vertical scrollbar because you have told safari you want to scroll within a specific element and not the body.

    Also you may want to rewrite your HTML for the following reasons:

    1. Your using the auto generated HTML that Adobe Photoshop outputs which isn’t semantic
    2. Your using

      and
      elements while are semantic don’t serve any real purpose in websites these days, its much cleaner to use CSS and web safe fonts

    # January 16, 2012 at 4:10 pm

    so what your telling me is no matter what I do, if i want to have the page setup like i do, the iphone will never display it properly?

    also, the only auto generated html i used was the slicing of the main image for the web. What would you change or do differently?

    # January 16, 2012 at 10:43 pm

    You might try the scrolling="yes" attribute on the iframe. You can also put overflow:scroll; in the css for that iframe. I’m not exactly an iOS expert, though.

    # January 18, 2012 at 4:10 am

    so what your telling me is no matter what I do, if i want to have the page setup like i do, the iphone will never display it properly?

    That’s correct, iOS handles scrollbars differently from Mac and Windows machines to save vital space on the screen. You could try everything possible but it won’t make a difference.

    also, the only auto generated html i used was the slicing of the main image for the web. What would you change or do differently?

    I would do the following:

    1. Get rid of all the tables and map elements
    2. Use a proper < !DOCTYPE> such as XHTML 1.0 Transitional/Strict or HTML5
    3. Re-code your markup using DIV elements and CSS which is much cleaner and more maintainable

    # September 27, 2012 at 1:17 am

    User csdco (https://github.com/fancyapps/fancyBox/issues/2#issuecomment-5997068) 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:

    a-file.html:


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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".