Search code examples
jqueryipadios5ios4mobile-safari

slider not working in mobile safari 5, works fine 4


I have this slider which displays in a lightbox/modal. There are 2 buttons that slides left or right (next/prev). In IOS 4 it slides perfectly but in IOS 5 when I click the slider nothing happens however if you change orientation or zoom in/out the image will change. So the code is working but it is not displaying it until you do an action. Partial code below, this is how the slider is made. The best example I can find of this issue is on toyota. http://www.toyota.ca/toyota/en/vehicles/yaris/gallery click the images at the bottom and a modal will pop. If you use IOS 4 the modal is scrollable like normal but if you use IOS 5 the image won't change unless you do an action. Is this a common issue with IOS 5?

// Modal Slider
            this.scrollableApi = $('.modal_scrollable').scrollable({
                api: true,
                circular: false,
                prev: '.slide_prev',
                next: '.slide_next',
                easing: jQuery.easing['jswing'] ? 'easeInOutCubic' : 'swing',
                speed: 750,

Solution

  • found a fix myself, thanks for your time

    it had something to do with position fixed not working properly on ios