iPhone: Rotate device strange behave

[santscho]

PhotoSwipe/Query Mobile/XCode /PhoneGap.

When I am in the "swipe" mode (not thumbnail) and I rotate my iPhone4 (iOs 4.3.3), from portrait to landscape (or landscapre to portrait), PhotoSwipe does not adjust to the new screen size/format. The navigation bar has the wrong position and parts of the thumbnails appear behind the wrong sized zoomed images.

Is there a way to fix this? Or can I switch off device rotation only for the gallery page?

Cheers Ralph

[codecomputerlove]

Hi is this issue only happening in PhoneGap - are you experiencing it from Safari / by adding it to your home screen and running it from there?

[santscho]

Just did a test. When I add it to homescreen, everything rotates smooth. and the images automatically adjust to the new screen orientation.

[codecomputerlove]

OK thanks. As soon as I get opportunity I'll double test this again in PhoneGap.

[ghost]

I want to add: I have the same problem on Ipad with the example gallery in plain Safari. The size of the picture viewer overlay isnt recalculated.

EDIT: It works fine on my Android phone though!

[matthew-dean]

I'm not using PhoneGap and I'm seeing this issue (rotation causes incorrect positioning). I am using jQuery Mobile though. Here's a screenshot: http://twitpic.com/5ld1fx

[matthew-dean]

Ah ha... I have this line:

window.scrollTo(0,0);

This is so I can always get rid of the URL bar. However, it appears that this screws up the positioning. In addition, I also have swipe commands that reset the scroll. (Any swipe command for my site will hide the URL bar for an "app-like" view.) Is there a way to "reset" the PhoneSwipe positioning if I do this kind of scrolling, so that I can just call some method to re-calculate?

[matthew-dean]

I've tried disabling all of those scrolls, but I'm still having issues, making me think it's unrelated. Not sure why, but it just "jumps" down in position when I re-orient the screen (maybe an issue with the "centering" algorithm?)

[codecomputerlove]

What device, OS version & browser are you using? Does this happen with the provided examples or is it your implementation?

[ghost]

It works for me now. I was on iOS 4.2.1 and updated to 4.3.3. The Example works. Although the rotating is still slow? Is this normal?

[codecomputerlove]

Intosia - how do you define slow? What is the device you are using. Is it slow in the examples? Sorry guys, need more help here as it's difficult for me to effectively respond. Thanks!

[ghost]

Im using a Ipad, sry i did mention this in my other post. It just takes like a good 1,5 second before the image is centered and resized, when i rotate my ipad. Maybe thats normal idk. Anyway it works now, and i can start coding :)

[codecomputerlove]

Thanks. Is this slow in the examples running in Safari on iOS or is it slow in PhoneGap, or both? Which iPad is it, the first one?

[ghost]

Im sorry, yes iPad 1. And its just in Safari, its all the examples. Ok i made a vid: http://www.youtube.com/watch?v=aGUq3VoDrLs maybe its not 1,5 seconds, but on my Android phone its atleast two times faster. Maybe its normal i dont know!

[codecomputerlove]

Thanks for the vid! Yeah the speed looks comparable to our iPad tests. Re-orientation has to do a lot of resizing and re-positioning partly as a fudge because the browsers do not yet support fixed positioning. I'll have a look at optimising it further / coming up with another way of re-positioning that is less processor intensive.

[matthew-dean]

I'm still getting this issue on 3.1.2 with an iPod Touch (2nd or 3rd) generation. Also using jQuery Mobile. With the page partially scrolled down, the bottom UI doesn't appear at all. It's just a large grey bar. If the address bar is showing, it appears to display correctly.

[matthew-dean]

I think I fixed it!

I commented out this line in the CSS:

body.ps-active { -webkit-text-size-adjust: none; /* overflow: hidden; */ }

I knew it was some kind of overflow issue. Not sure why, but probably the absolute positioning is cropping on older iOS versions. Could this happen if, by default, my body tag is less than the height of this overlay? In any case, commenting it out doesn't cause any problems for my site, but COULD cause a problem for some sites if they have a larger body height.

[codecomputerlove]

thank you. Appreciated. This CSS rule stops Safari scaling text when you rotate the device. To be fair I forgot it was in there and in fact may not be needed at all.

Kudos for finding it!

[AngusY]

I encountered the same orientation problem on iPhone 4 with my JQM + Phonegap project using photoswipe v1.0.19. matthewdi's solution seems to have the problem fixed except that there is still a problem on the first rotation,. i.e. first orientation change from portrait to landscape: the screen is messed up. The screen appears to be fine when I do consecutive changes of orientation, 2nd time and on. There is no problem when I change from landscape to portrait, even on the first time. Any idea on how to fix this?