Strange behavior in iframes on iPhone/iPod

Anfänger

Donnerstag, 10. Februar 2011, 23:40

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!

Zum Seitenanfang

HansNyb

Profi

Beiträge: 1 063

Wohnort: Denmark

Beruf: Photographer

2

Freitag, 11. Februar 2011, 10:47

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

Zum Seitenanfang

Usabell

Anfänger

Beiträge: 11

3

Freitag, 11. Februar 2011, 18:01

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 :-)

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!

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Usabell« (11. Februar 2011, 21:13)

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

4

Montag, 14. Februar 2011, 14:11

Hi,

Zitat von »Usabell«

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

Zitat von »Usabell«

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:
http://krpano.com/download/beta/

best regards,
Klaus

Zum Seitenanfang

Usabell

Anfänger

Beiträge: 11

5

Mittwoch, 16. Februar 2011, 18:09

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.

Zum Seitenanfang

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

6

Freitag, 7. Oktober 2011, 03:52

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.

Quellcode

<style>
body { background-color: white; margin:0}
iframe { width: 100%; height: 100%; frameborder:0 }
</style>
	<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" />


</head>

<iframe src="http://www.virtualtour.com" frameborder="0" >
</iframe>

</html>

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Zum Seitenanfang

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

7

Freitag, 7. Oktober 2011, 04:26

I was thinking iframes were an easy method to give a client while hosting the tours.. iframes also kill the gyro on ipad.
monkey nuts.

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Zum Seitenanfang

Sam Rohn

Schüler

Beiträge: 110

Wohnort: Brooklyn, New York

Beruf: 360° VR Photographer

8

Freitag, 7. Oktober 2011, 07:47

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

www.samrohn.com

textfield js is another story :)

sam

Sam Rohn :: 360° Panoramic Photography :: Location Scout :: New York City :: www.samrohn.com

PanoPress :: WordPress Plugin for 360° Panoramas in Flash & HTML5 :: www.panopress.org

Zum Seitenanfang

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

9

Freitag, 7. Oktober 2011, 15:36

Whats up with textfield js and iframes?

The one issue I've found is that since viewport doesn't work, your krpano resolution becomes like 3000px ipad and 1900 px iphonel, so you have to scale everything up 2-3x.
Same effect on all plugins.

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

10

Mittwoch, 12. Oktober 2011, 20:44

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

Zum Seitenanfang

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

11

Mittwoch, 12. Oktober 2011, 22:01

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

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Zum Seitenanfang

Nupsi

Profi

Beiträge: 697

12

Donnerstag, 13. Oktober 2011, 10:09

Zitat von »sachagriffin«

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

+1

Best regards
Nupsi

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

13

Dienstag, 18. Oktober 2011, 12:26

Hi,

Zitat von »Nupsi«

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

Zum Seitenanfang