Slideshow not displaying images correctly since last iOS update

mike's Avatar

mike

21 Sep, 2015 05:56 PM

I have the slideshow implemented on a recently launched website. It replaces a video when the website is viewed on a mobile device such as an iPad or iPhone. It was working fine until the last iOS update. Now when the image slides over it shows black and then the next image "pops" in. You can view it at [link hidden]. The homepage will show the slider if you view it on an iOS device using mobile Safari. It works ok on the Chrome browser for iOS. Any idea s how this might be fixed?

Here;s the activation code I have for the slider...

     $(document).ready(function($) {
          $('#full-width-slider').royalSlider({
            arrowsNav: false,
            loop: true,
            keyboardNavEnabled: false,
            controlsInside: false,
            imageScaleMode: 'fill',
            arrowsNavAutoHide: false,
            autoScaleSlider: false, 
            autoScaleSliderWidth: 960,
autoScaleSliderHeight: 350, controlNavigation: 'none', thumbsFitInViewport: false, navigateByClick: false, startSlideId: 0, autoPlay: true, transitionType:'move', globalCaption: false, deeplinking: { enabled: false, change: false }, /* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */ imgWidth: 1440, imgHeight: 960, sliderDrag: false, sliderTouch: false, autoPlay: { // autoplay options go gere enabled: true, pauseOnHover: false, delay: 3000 } });

And here is the html...

<div id="full-width-slider" class="royalSlider heroSlider rsMinW">
    <div class="rsContent">
        <img class="rsImg" src="/images/styles/home_slider_01.jpg" />
    </div><!-- end rsContent -->
    <div class="rsContent">
        <img class="rsImg" src="/images/styles/home_slider_02.jpg" />
    </div><!-- end rsContent -->
    <div class="rsContent">
        <img class="rsImg" src="/images/styles/home_slider_03.jpg" />
    </div><!-- end rsContent -->
    <div class="rsContent">
        <img class="rsImg" src="/images/styles/home_slider_04.jpg" />
    </div><!-- end rsContent -->
</div>
  1. 1 Posted by mike on 21 Sep, 2015 06:08 PM

    mike's Avatar

    I just changed it to "fade" transition type for now since the site is live. This looks to be working ok. The client would still like the "move" transition type though. Please let me know if you want me to change back to take a look.

  2. Support Staff 2 Posted by Dmitry Semenov on 21 Sep, 2015 07:50 PM

    Dmitry Semenov's Avatar

    Hello,

    Can you please create some test page with slider that doesn't work correctly and link to it?

    Also, can you repeat the problem on the main demo site, e.g. on this page http://dimsemenov.com/plugins/royal-slider/gallery/ ?

    Thank you.

  3. 3 Posted by mike on 21 Sep, 2015 08:04 PM

    mike's Avatar

    Dmitry, the problem is happening the same way on the demo page you linked to. When I click on a thumbnail on my iPad the image slides over but you see black beside it as it slides, then when it's done sliding the new image pops into place. I see this on my Ipad with the newest version of iOS and on the device simulator in XCode. Thanks for the quick response!

  4. Support Staff 4 Posted by Dmitry Semenov on 22 Sep, 2015 06:49 AM

    Dmitry Semenov's Avatar

    Indeed, no idea how I missed that during initial ios9 safari test. It seems this style fixes the issue on my side:

    .rsWebkit3d .rsSlide {
        -webkit-transform: none;
    }
    

    Try it please.

    Funny that the opposite style fixed almost the same bug in Safari on iOS6.

  5. 5 Posted by mike on 22 Sep, 2015 01:43 PM

    mike's Avatar

    awesome, that worked, thanks for the quick help on this!

  6. 6 Posted by Dan on 06 Apr, 2016 04:33 PM

    Dan's Avatar

    Has this fix been added to the most recent version?

  7. 7 Posted by dim on 07 May, 2016 08:06 AM

    dim's Avatar

    Yes - I have just grabbed a copy of 1.0.6 and it is included ref: line 13.

  8. 8 Posted by bene.ritschel on 02 Apr, 2018 07:26 PM

    bene.ritschel's Avatar

    This comment was split into a new private discussion: Slideshow not displaying images correctly since last iOS update

    Hey Dmitry

    I have seen you released a new version of royalslider on envato. Thanks for your awesome plugin :)

    I updated my slider on my website now and i got serious display problems on IOS iphone X 11.2.6.

    In Chrome App: Images not displaying correctly / Very Buggy to slide "drag is enabled", Slider is not animating correctly to the next slide.
    Safari: Arrows are not displayed, but enabled.

    please look at the attached video.

    BG Bene

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac