WordPress.org

Ready to get started?Download WordPress

Forums

ipad/iphone iframe, oh the absurdity! (20 posts)

  1. cicakchanson
    Member
    Posted 1 year ago #

    Hello comrades,

    I have the most bizarre problem with embedding an iframe into my web site and getting iOS safari to play nicely. My issue is that I have a rather long (height wise) iframe embed of a google doc. Everything seems fine when viewing the iframe on a laptop using Safari, Chrome, and Firefox. Since the site is reactive, its also designed to look good on iOS (iPhone/ipad). However, when you scroll down the iframe it gets cut off and nothing but blank space is rendered when viewing the site on an iPhone/ipad. I tried implementing THIS solution but it didn't solve my issue.

    I'm hoping that someone has a iPhone/ipad handy and could check this out. I think we'd all benefit from knowing how to get iOS to play nicely with iframes.

    The site is http://www.elizabethmerendino.com

    (PS. if you get redirected to http://www.thewanderingguru.com don't despair. Enter the url again and it should work. Thats another issue I'm tackling. Thanks for the help.)

    Cheers

    Karl

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    I simply can't get to the first url on the iPad without being re-directed.

  3. cicakchanson
    Member
    Posted 1 year ago #

    That sucks emsi. I'll fix this and let you know when I've sorted this. Thanks for trying to help.

    Best

    Karl

  4. My issue is that I have a rather long (height wise) iframe embed of a google doc.

    It's the doc. 100%.

    Google Docs are murder on an iDevice :/

  5. cicakchanson
    Member
    Posted 1 year ago #

    OK. I think I've licked the re-direction issue. According to 9/10 people I've contacted.

    esmi, if you're still interested I'd love to hear your opinion.

    Ipstenu, I'm hoping that you're off a bit on this one. As I understand it, if you publish a google doc (which is the case here) Google generates a low profile web page of the document which is then the source of embedded in the iframe. Unless there is something special about the web pages a Google doc generates it shouldn't make any difference what page is the source. That seems logical, but then again I don't really get this iframe thing either so what do I know?

    Anyhow, For all those whom might like to tackle a truly odd iFrame issue please let me know if you come up with a possible solution.

    Again, the issue is that when you view this page on an iPad/iPhone, it cuts off the text of the embedded doc when you scroll down to a certain point for some odd reason. The doc is the text under the welcome graphic in the tabbed window on the home page.

    The site address is http://www.elizabethmerendino.com

    Thanks for all the help and patience!

    Best

    Karl

  6. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    As it so happen, I had just gotten my iPad out to "play". Unfortunately, I'm still getting re-directed. Using Ipad 3 & Safari, if that helps at all.

  7. cicakchanson
    Member
    Posted 1 year ago #

    Esmi,

    Try clearing your history and data/cache in the 'Settings.' The people that were helping me troubleshoot the redirection issue found that helped. If this doesn't help you please let me know.

    You can also try http://www.thewanderingguru.com/emerendino.

    I've parked a domain on my server and I'm trying to use MU Domain mapping plugin to do the redirection job. It seems as though it might not be working as well as I hoped but I've got my fingers crossed that clearing your history/data/cache will help. Thanks again for sticking with this.

    Best

    Karl

  8. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Clearing the cache didn't help. http://www.elizabethmerendino.com/ still redirected to http://www.thewanderingguru.com/ But http://www.thewanderingguru.com/emerendino redirected to http://www.elizabethmerendino.com/ - which just seems plain weird!

    FWIW, I'm not seeing anything untoward on the site's home page. It all looks good. No bizarre behaviour on scrolling or navigating. No blank space other than that caused when the sidebar's length exceeds the main content's. All in all, quite tidy.

  9. cicakchanson
    Member
    Posted 1 year ago #

    Thanks esmi,

    I'm not sure what to do about the redirect issue. I checked 3-4 different machines today and they all went right to http://www.elizabethmerendino.com with no worries.

    A friend of mine was helping me and we might have created a redirect loop at one point which we promptly changed in the cPanel to get rid of it.

    He was still having difficulty on his machine (with regards to redirects) today but I when I tested it I didn't have any issues.

    I guess this is a much more serious issue than i thought. As I said I'm using WPMU redirect so I'm not sure what to make of that issue at this point.

    Anyhow, with regards to the iframe issue, if you'd be willing to check where the text ends on the main page with the text found HERE that might ease my mind a bit as far as if anything is getting cut off.

    On a broader note, I'm passionate about web design but I haven't been doing it that long with wordpress. This kind of erratic behavior between machines makes me nervous. This site has been a work in progress for a long while now and the lady I'm working with (Elizabeth) is allowing me to use her as a test case for a business that I hope will make many more sites like these. However, I really need to understand why some of these odd issues are taking place before I can really get this business off the ground. It makes it very hard to test when I can't be sure whether or not people will actually be able to get to the site or that they'll be able to read all the content with different machines of the same make and model performing differently. I don't know if I'm searching for advice, venting, or just in a bit of a funk. Regardless, thanks again for all the help and interest you've taken in this issue/these issues.

    Best

    Karl

  10. Google's shenanigans have caused me no end of grief. They're supposed to show a low res version, but I've had it fail on me about half the time (to the point I shouted nasty things at my computer).

    Wait ... WPMU redirect? What do you mean by that? Is that a plugin or are you just saying you're using Multisite?

  11. cicakchanson
    Member
    Posted 1 year ago #

    Sorry Ipstenu, I should have named the plugin correctly its.

    WordPress MU Domain Mapping: and its available HERE

    I followed the directions to the best of my ability but it seems like I'm missing something.

  12. Ahhh :) Okay.

    You're not trying to map the primary domain are you? That plugin needs to work as follows:

    Multisite installed in domain.com
    Subsite generated as site1.domain.com (or domain.com/site1)
    Map site1 to site1.com

    And so on and so forth.

  13. cicakchanson
    Member
    Posted 1 year ago #

    Thanks for that info Ipstenu,

    I followed the directions on the tutorial I found for mapping subdomains but obviously something is wrong.

    I found this new tutorial: HERE which seems to have slightly different directions than the ones I tried before. I think I'll give these a whirl and see if I can't nip this domain redirect issue.

    Bye the way, esmi says that the google doc looks good if you go to http://www.thewanderingguru.com/emerendino. Anyone notice the cut off I'm talking about or is that also going to be something thats going to vary from machine to machine :/

  14. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Jut went back in and did a side-by-side comparison between iPad Safari and Win7/Firefox 13. The scroll bar is completely absent in iPad/Safari :-(

  15. cicakchanson
    Member
    Posted 1 year ago #

    So, I just loaded the site on my iPhone and I installed the latest Firefox on a Windows machine running OS7. I was able to scroll (one finger swipe) on the iPhone and I see a scroll bar appearing in Firefox but in Chrome (Win/OS7) I don't even see the iframe. It doesn't appear. :-(. On my iPhone I'm able to scroll so I'm not sure what to do at this point.

    Does anyone know a more stable way of having a google doc appear in your web site. A plugin perhaps? I'm starting to think this issue is not solvable. With the same type of OS/browser configuration you'd expect similar results. Can the results between iPhone and iPad be so different?

  16. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Not sure what iOS the iPhone runs. The iPad 3 uses iOS5 - which might account for some differences.

  17. cicakchanson
    Member
    Posted 1 year ago #

    Yeah using an iPhone 4s so it should be IOS5 as well. Anyhow, I found out why my iframe wasn't displaying in Chrome on Windows OS/7. I was getting an error message in Chrome's developer tools that said "Refused to display document because display forbidden by X-Frame-Options." I find that pretty sad since I'm trying to embed a Google doc and the only desktop browser that seems to have a problem with it is Chrome.

    Anyhow, I think I've come to the decision that iFrames on the front page of my sites are just too risky. I'm sure you've already realized this but I'm creating employment web sites for my clients. They are depending on me to put up web sites that work and if prospective employers are greeted with a blank page then my client has just lost an opportunity. I'll let iframes stand on pages other than the main page but those iframes will be backed up with icons to downloadable versions of the content. That should cover all the bases until someone figures out how to make frames behave a bit more predictably. I haven't quite tackled the redirect issue yet but I'm on it. thanks for the help esmi and Ipstenu. As always!

  18. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    those iframes will be backed up with icons to downloadable versions of the content.

    That's the same approach I took on a non-WordPress site a while back when the client wanted to embed some fairly critical Google docs. I've never been comfortable with the cross-browser support of embedded content that I cannot control.

  19. seedouble
    Member
    Posted 1 year ago #

    Hi there, sorry to bring up a dead topic if that's the case, but I would like to hear a bit more about the iframe on ipod/ipad issue.

    I am currently working with a CMS platform for a "website" I'm helping a client with. Ist the issue that iPad or iPod users using the default browser (Safari?) are not able to scroll iframes at all? Or you are able to scroll but there is no scroll bar?

    I am excluding third party software for now as I would like to hear the details about the out-of-the-box support, or lack of support currently.

    Also, are there ways that the developer may have worked around this issue or am I stuck with whatever is given from the creators of HTML and iOS?

    Many thanks.

  20. cunneen
    Member
    Posted 1 year ago #

    I know it's a bit old, but try this in the CSS:

    overflow: auto;
        /* ==== scrolling for ios, as per http://stackoverflow.com/questions/3845445/how-to-get-the-scroll-bar-with-css-overflow-on-ios === */
        -webkit-overflow-scrolling: touch;

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.