Mobile safari 5 does not respond to js events until further acton
So check http://www.toyota.ca/toyota/en/vehicles/yaris-hatchback/gallery with ios 5 / mobile safari 5 or simulator click the image on the scroller at the bottom and a lightbox will appear.Try to click the following button, you noticed that nothing was happening. Now if you zoom in / out or change orientation or scroll the page, the image will change.
js works because the next / prev will become enabled / disabled when you click on them, but it doesn't do the animation part until further action. Why is this? is it common? If you try the same page on ios 4 it works fine.
source to share
Don't use a handler click()
, use a handler mousedown()
.
Mobile devices have a hard time between a click()
and a mousedown()
.
The required change is line 472 in common.js
, change
var o=p(f,c.prev).click(function(){b.prev()}),q=p(f,c.next).click(function(){b.next()});
to
var o=p(f,c.prev).mousedown(function(){b.prev()}),q=p(f,c.next).mousedown(function(){b.next()});
Either this, or for each such navigation button when creating, use:
$(selector).bind('mousedown',$(selector).data("events").click[0].handler)
$(selector).unbind('click',$(selector).data("events").click[0])
Where selector
is the jQuery selector for a specific element.
Or you can just use $(class).off
to clear the handler once and for all.
source to share