Does jquery work on safari iphone?

Question

I work on a website where I use the slimbox2 plugin (similar to the lightbox) for jquery to create photo enlargements.

The plugin works in every browser I tried, with the exception of Safari on the iPhone. It works as expected in Safari for Windows, but there are two problems on the iphone:

• Darkening of the rest of the page occurs only at the top of the page, about the height of the viewport (say, the top 400 pixels of the page), everything below remains as it is.
• A larger image is placed exactly in the middle of the page, not in the middle of the viewing area.

I read somewhere here that jQuery should work fine on the iphone, but since positioning and attenuation seem to be the main functions of jquery, I think that maybe this is not entirely true. Of course, it could be a plugin ...

So my questions are: does jquery really work on iphone, and if not, does anyone know how to make it work?

Thank you so much!

Answer 1

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

My guess is probably the problem with your plugin using position:fixed to create the overlay (the "darkening of the page" you mentioned), and also for the container for the largest image. Web Search Position: Fixed on Mobile Safari will give you a lot of further reading on this!

It seems that since Mobile Safari believes that “viewport” is a whole page, not just a visible part, a position: a fixed trend does not work as we would expect. I have the same problem with another jQuery plugin that creates a “modal” window for me with very similar symptoms, like what you described.

I am currently trying to get around this by (A) resolving the position: fixed and changing to position: absolute, while (B) sets the height and top manually based on the entire height of the body and the scrollTop window, the jquery property. I think that a good old browser bypass can be useful here, since this hack is really needed only for this browser.

Answer 2

jQuery works great on iPhone. Mobile Safari is the same standards-based browser as the desktop. In fact, it’s better in terms of adopting some CSS rules. Any type of JavaScript works just fine if it fits within the differences in the iPhone interface (for example, without a mouse).

I think the question is better worded: "Does Slimbox2 work with Mobile Safari?"

Answer 3

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

This may be a bug in Safari. Try it on an apple machine and see if it works there.