Strange behavior in iframes on iPhone/iPod

  • Hello there! I just fixed a pano tour for iOS thank to some really nice people here showing me how I should NOT do some things,
    and now that it is working for the first time in the context of our website, I see that it has some other strange behaviors.

    Here you can see the panorama in the context of the site: http://blende12.ch/360/
    And here you can see the panorama by itself: http://blende12.ch/360/paps/tour.html

    Both are the same panorama fileset, the first one in an iframe on the website, the second one is the direct link to the html document.
    On computers (flash interface) both work perfectly. On iOS, the direct (second link) works perfectly as well. However, the iframe version
    does exhibit the following unusual behaviors on iOS:

    - Fullscreen is not possible
    - plugins and hotspots are very small and very hard to use
    - somehow the movement has a very strange "snapping back" behavior when dragging the panorama view around

    My question now is, is there a workaround for this or is the iOS version just not compatible with iframes and I should try using a different method of integrating it into our site?

    Thanks for your replies!

  • I am sorry but there is no way around.
    The fullscreen option in HTML5 is not at all the same as fullscreen in flash even if the same command is used so that you can actually use the same buttons.

    The HTML5 fullscreen just fills the browser window just expanding the div to 100%.
    So that means it will just expand within your iFrame window which you already have as 100%.

    I have been using iFrames for many years at panoramas.dk and they are great for both flash and quicktime and many other things but I could not find a solution that worked with HTML5.
    It is not just the fullscreen problem but iFrames on iPad does not obey the same CSS rules as on other devices. It does not work with height in percent and that was for me an absolute demand.

    I even did a special demo to work around the fullscreen problem in special cases. Her it is using iFrame.
    http://360-foto.dk/stjakobs/kirken2.html

    In this case the fullscreen button for iPad and iPhones opens a new page with target _parent. This page has the exit button as default view and the link on it is opening the main page as target _self.
    Of course you can only see this on the iPad and iPhone and you will of course start all over each time you open or exit the "fullscreen"

    Hans

  • OK, I understand things much better now, thanks for helping me around this. So also the strange snapping back behavior is part of the problem with the iframe,
    and I should definitely look into removing the iframe altogether. Probably gonna replace it with a table of some kind to keep the size the same I guess.
    I will experiment with it some more once our web designer gets back from vacation (which will be on wednesday), and share my results with you here.
    I will be more than happy to sort out any troublemaking code in our website *smile*

    Cheers

    EDIT: I now replaced the iframe on the site and just inserted the pano itself at the desired size instead. Now the navigation behavior is back to normal,
    and doesn't "slip back" anymore which is already a huge improvement over the iframed version. However, hotspots, buttons and the logo are still very
    small so I used the scale function on them if an iphone is detected. I also noticed that the entire pano seems a bit blurred or lower res than when viewed
    directly. And again, fullscreen does not work :( It is not in an iframe anymore, so that can not be the cause anymore.

    Any further hints on these issues are greatly appreciated, thanks!

    Edited once, last by Usabell (February 11, 2011 at 9:13 PM).

  • Hi,

    I also noticed that the entire pano seems a bit blurred or lower res than when viewed

    when not setting the page size to the native screen resolution via the "viewport" meta tag,
    then the iPhone/iPad is handling the page scaling, resolution by its own,

    and in the case when the resolution of the pano and the screen resolution don't match (because there is no
    viewport meta tag) the browser is scaling the pano and the pano images by its own, and so they
    can be more blurry as they are really are,

    you could try to use meta viewport tags from the krpano html files, but in this case you
    probably also need to redesign your webpage

    And again, fullscreen does not work

    please try using the latest beta/prelease - there fullscreen function has been a bit improved,
    but there can be still some situations where it doesn't work right:
    https://krpano.com/download/beta/

    best regards,
    Klaus

  • Wow, thanks a lot Klaus, your solution totally nailed the problem. After using the newer pre-release, it was already "somewhat" working
    (you can see the result on the URL http://blende12.ch/360/, it already works somehow in vertical orientation, but in horizontal
    view, it only filled like 3/4 of the screen in fullscreen mode). A big improvement over the old one.

    Then, after putting the viewport tag into the site, fullscreen worked *exactly* like I wanted it to work, but the whole web site was giant now
    and without any ability to zoom out :( Is there maybe a way to only set the viewport when entering fullscreen, because it would really be
    perfect like that. I know too few about newer html and css stuff to even fully understand what the viewport tag does, but it seems to scale
    the page on the iPhone, making it 1:1 like it appears on a computer screen.

  • How do you use an iframe and get it to work in mobile safari for fullscreen.
    Its ALL messed up. EVEN with viewport stuff. Looks like iframes its completely ignored.. and ignoring the one on the src html

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

    ipad and flash are fine.

  • dont ask me how, but ipad gyro plugin seems working in iframe (in lightbox clone lightview) on my site, which i have not really properly gone into and fully set up for ipad, etc although all panos are viewable w html5

    http://www.samrohn.com

    textfield js is another story :)

    sam

  • Hi,

    the viewport settings are ignored inside iframes - iOS itself defines the size of the page inside the frame (larger than a 1:1 pixel mapping) and then iOS scales the whole page down to the iframe size - this makes the content inside the iframe also sometimes more smooth/blur,

    best regards,
    Klaus

  • Hi,

    So is there anything that can be done to make a 100%x100% iframe that has a normal iphone resolution?

    I think not,
    you will find a lot of pages around the web about mobile viewport and iframes, but nowhere a solution...
    the best might be to set the viewport settings with 1:1 mapping/scaling already in the 'outer' page,

    best regards,
    Klaus

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!