iOS 11 Ionic slide-box transition bug.

[CalvinJamesWylie]

Short description of the problem:

I have a slide box with multiple pictures. Auto play is on so normally one picture leaves and another seamlessly slides into its place. come the 4th transition and one picture slides off but the next one does not follow. only white is left in its place. once the initial slide has completely moved off screen the next slide then pops into view in the correct position without the nice transition.

What behavior are you expecting?

The slides to move into place without leaving a white background.

Steps to reproduce:

1. Create slider with images
2. set autoplay to true
3. let it run to the 3rd or 4th transition.
4. witness white background appearing.

<ion-slide-box does-continue="true" slide-interval="5000" show-
pager="false" on-slide-changed="slideChanged(index)" auto-play="true" 
class="fly">
    <ion-slide>
      <a ui-sref="tab.flights">
        <img src="img/slides/Fly/fly1.jpg" alt="">
      </a>
    </ion-slide>

Stack overflow with pictures: https://stackoverflow.com/questions/46362003/ios-11-ionic-slide-box-transition-bug

Ionic version 1.x

Plunker that shows an example of your issue

Cannot reproduce in plunker, only in iOS11. iOS 10 works fine.

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

Cordova Platforms : android 6.2.3 ios 4.5.0
Ionic Framework   : ionic1 1.3.2

System:

ios-deploy : 1.9.2 
Node       : v8.3.0
npm        : 4.2.0 
OS         : macOS Sierra
Xcode      : Xcode 9.0 Build version 9A235 

Misc:

backend : legacy

[dodomui]

I'm having the same issue and in my case I set auto-continue to true. The problem in my case is it keep flash background color after first round of image play. Example, I had 10 images, then after all 10 images play and loop back to the first image then the problem occur.

If my background color is white then it will flash white color page during each image transition. If my background color is black then will flash black color page during each image transition.

Wonder does it a bug with Ion-slide-box with IOS 11. Anyone have solution?

Worst solution I can figure is use others JS library for image slide show instead of ion-slide-box.

[nitinsurani]

I'm getting same issue in iOs 11. Can we have a proper solution? The issue is when set to auto-play true...

[nitinsurani]

Can I get answer or not?

[RakeshKB]

Hey @nitinsurani , were you able to fix this issue?

[nitinsurani]

Yes I’ve fixed accordingly slider

[dodomui]

May I know how do you fix this?

[nitinsurani]

Yes I've modify the css and then its working fine

[RakeshKB]

Hey, could you please share the css fix. If that could help us, nothing like it.

[nitinsurani]

Controller file:

$scope.options = { autoplay: 2500, loop: true, speed: 1000, slidesPerView: 1, centeredSlides: true }

Style css:

View File:

    < div class="swiper-containers main-swiper">
        < ion-slides options="options" data-swiper-autoplay="3000">
            < ion-slide-page ng-repeat="img in imgs" >
                < img src="{{img.img_url}}" />
            < /ion-slide-page>
        < /ion-slides>
    < /div>