Bug when changing iPhone viewport with javascript

views:

832

answers:

Bug when changing iPhone viewport with javascript

I'm building a web iPhone app that involves changing the viewport on demand with Javascript. I do this by changing the content attribute of the tag. This works well most of the times, except when orientation change is involved.

Everytime I try to change the viewport after an orientation change event, the page doesn't zoom to it's full size anymore, and a checkered background appears.

Here's a way to reproduce this:

Go to http:// daedalus.rcboyce.com/viewport/
Resize to 980 (iPhone's default)
Resize to 320 (works)
Resize back to 980
Go to landscape mode
Go to portrait mode back again
Resize to 320 (fails every time I tried)

Here's a screenshot of how it looks: http://tinypic.com/r/15qyzoh/6

Does anybody have any ideea why this is happening? Is this a MobileSafari bug, and if so, is there anyway to fix it?

i actually just ran into the same issue. i'm dynamically changing the viewport based on what the content is. it works great unless the user pinches/scales the page then my updates no longer take effect. don't really know what to do about this. i'm stumped

casey 2010-02-18 05:46:09

-1, this is not an answer. You should probably have posted it as a comment to the OP question instead.

August Lilleaas 2010-02-18 05:58:05

@August Lilleaas, I don't think -with a rep of 1 (as I write this)- that he's able to leave comments. (I'm also not sure that the answer was useful, but even so...)

David Thomas 2010-02-24 02:18:56

Oh, I didn't know adding comments required reputation!

August Lilleaas 2010-02-24 08:49:55

+1 A:

I'm sorry, but I don't see a button or link to add a comment...

I just submitted a bug report to apple because the viewport changes stop responding even after a user pinches, not just orientation change. I personally know a safari engineer and he knows some of the mobile safari people and he is going to ask them about it, or at least bring it to their attention

casey 2010-02-18 20:07:13

Awesome, please let me know if you find something out!

mirceapasoi 2010-02-18 23:46:36

I told my friend at apple. He said he will "show it to them" (them being the mobile safari group). I provided him with all the details to reproduce the issue. I'll let you know if I hear anything further...I'm looking into the style property webkitTransform to see if it can be used as a work-around, will let you know if I come up with anything there...

casey 2010-02-19 18:10:00

Any luck with using webkitTransform?

mirceapasoi 2010-02-23 22:08:48

some. I can get the page to scale even after pinching, but we still aren't there yet. The webView stays zoomed out while the content inside it gets larger. And the webView doesn't know the size of the content has grown so the scrollable space doesn't grow. Basically what happens is the content goes off the screen and you can't get to it....yet. I'm working out a way to get this to work, if it's possible. I'll keep you posted

casey 2010-02-24 01:51:23

UPDATE: I've got it working. The webView now accounts for the new content size. Last issue: Scaling it by the right amount to make it full screen and emulating going back to scale 1 (its not as simple as scaling it to 1.0 since it's value isn't related or correlated to the native scaling)...will once again, update you if I make any progress

casey 2010-02-24 02:05:12

Awesome. Can you tell me how you got it to account for the new content size?

mirceapasoi 2010-03-01 06:53:46

i think i played with document.body.width

casey 2010-03-19 15:29:40

ansaurus

tags:

views:

answers:

Bug when changing iPhone viewport with javascript

related questions