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

Stack overflow works on the iphone, according to Jeff on one of the early podcasts, and stack overflow uses jQuery, so that would be yes, jQuery works on the iphone.

It could be a bug in Safari. Try it on an apple machine, and see if it works there too.

Answer 2

jQuery works fine on the iPhone. Mobile Safari is the same standards-based browser as the desktop. Actually, better, in terms of some CSS rule adoption. JavaScript of any kind runs just fine, as long as it fits within the iPhone's UI differences (no mouseover, for example).

I think the question is better phrased as "Does Slimbox2 work with Mobile Safari?"

Answer 3

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.