Does jquery work on the iphone´s safari?

Question

I am working on a web-site where I use the slimbox2 plug-in (similar to lightbox) for jquery to generate photo enlargements.

The plugin works in every browser I have tried except for Safari on the iPhone. It does work as expected on Safari for Windows but on the iphone there are two problems:

• The darkening of the rest of the page only happens on the top of the page, about the height of the viewport (let´s say the top 400px of the page), everything below that remains as it is.
• The larger image itself is placed exactly at the middle of the page, not the middle of the viewport.

I have read somewhere here on SO that jquery is supposed to work just fine on the iphone but as positioning and fading seem to be basic jquery functionalities, I am thinking that maybe that is not completely true. It could of course also be the plugin...

So my questions is: Is jquery really working on the iphone, and if not, does anybody know how to make it work?

Thanks a lot!

Answer 1

I know this is over a year and a half old, but here goes in case this helps anyone else:

My guess is this is likely a problem with your plugin using position:fixed to both create the overlay (the "darkening of the page" you mentioned) as well as the container for the larger image itself. A web search for position:fixed on Mobile Safari will give you lots of further reading on this subject!

It seems that because Mobile Safari considers the "viewport" to be the entire page rather than just the visible portion, position:fixed tends to not work as we would like to expect. I am having this same issue with another jQuery plugin that creates a "modal" window for me, with very similar symptoms as what you described.

I'm currently trying to work around this by (A)eliminating position:fixed and changing to position:absolute, while (B)setting heights and "top" manually based on the body's entire height and the window's "scrollTop" jquery property. I think some good old browser sniffing might be of help here, since this "hack" is only really needed for this one browser so far.