bug: <ion-slide> not work correctly in beta.10

[tomasstankovic]

Problem

After loading a page my slider doesn't work correctly (show only 1 bullet point and slide don't work), but after resizing page, bullets have a right number and slider work correctly. I mean this is bug in beta.10.

Ionic version: Ionic 2 beta.10

Example

http://g.recordit.co/5D2CzdZa1o.gif

Discussion

https://forum.ionicframework.com/t/ion-slide-not-work-correctly-in-beta-10/56026

[xr0master]

Anyfix?

[hackfrag]

+1

[jgw96]

Hello everyone! I can confirm this issue and will be looking more into it. What platforms are you all seeing the issue on?

[xr0master]

Just on browser. Something with NaN value instead of number. It looks like widget problem. Do you update slider.js?

[GerritErpenstein]

Copied from forum discussion:

[...] The problem was that the swiper container has already been in the DOM but not rendered when I instantiated the Swiper code. Swiper's calculations rely on the container's width which is 0 when the container is not rendered. My (hacky) solution was to use requestAnimationFrame() until the container's width is >0 and instantiate Swiper after that. [...]

See the following repo for an example app containing a temporary fix: https://github.com/GerritErpenstein/ionic2-slides-temp-fix/ You can find the relevant code in "app/pages/slides". I'm really curious whether somebody comes up with a better solution!

[javebratt]

Hey @jgw96 any update on this? It's kind of a big deal :smiley:

[jgw96]

@javebratt, yep would you mind giving the latest Ionic 2 nightly a try and see if you still run into the same issues? To install Ionic 2 nightly just run npm install ionic-angular@nightly. Thanks for using Ionic!

[javebratt]

Hey @jgw96 I'm trying nightly, but it half works, I'm on Ionic Serve right now, it works only if I emulate iOS, if I emulate android the slider only slides half way, it doesn't move to the next slide.

And my this.slider.slideNext(); stopped working altogether.

EDIT: With the new version I had to update @angular/forms@0.1.1 I don't know if that was it but I'm having a new problem now, all of my Alert and Loading components stopped working, so I'm reverting the version now.

[jgw96]

@javebratt yeah, we did a refactor of the overlay components such as alert and loading. When beta.11 gets released we will have directions on how to use the new api. Here is an example of creating an opening an alert with the new api

Alert is now a provider called AlertController

import {AlertController} from "ionic-angular";

Inject it in your constructor

constructor(private alertCtrl: AlertController){};

And use it like this

let alert = this.alertCtrl.create({
  title: 'Error',
  subTitle: 'There was an error getting this song',
  buttons: ['OK']
});
alert.present(); 

Hope that helps! I am working on the slides issue now, it seems to be a timing issue of when swiper gets initiated, but im not 100% sure on that yet

[derekdon]

+1

[ghost]

+1

[ValterSantosMatos]

Probably related: to #7192

[schankam]

Yes, same problem as #7192.

Also having the issue on Android (browser and emulator, and probably device as well)

[GerritErpenstein]

Concerning 580b8d5: Is there a reason to wait exactly 300ms until the swiper instance is rendered and is it guaranteed that is rendered after this amount of time?

[xr0master]

+1 very strange fix.

What about use ngAfterViewInit or ngAfterContantInit? Move from ngOnInit

var swiper = new Swiper(this.getNativeElement().children[0], options);
this.slider = swiper;

to ngAfterViewInit block

or use QueryList and Observe

[jgw96]

@GerritErpenstein @xr0master So for now we had to use the fix of setting the timeout to 300ms because none of the Angular lifetime hooks happened at exactly the right time that swiper needed unfortunately. We are going to be taking a deeper look at slides in the future, but this was the best fix for now. I tested it on all of my devices, including slower android devices and an old iphone 5 and this fix is solid.

[xr0master]

@jgw96 I understand... However how did it work before beta.10?

[alexciesielski]

For me the following workaround works (no need to add 300ms to setTimeout):

Before Beta 10:

nextSlide() {
        this.slides.slideNext();
    }

Beta 10:

nextSlide() {
        this.slides.update();
        this.slides.slideNext();
    }

nextSlide() is called through a button-click in the template.

[barocsi]

Why did you close this issue? Still there and fixes are not clear. I was trying to go with tabs first. It wont work due to another issue. Then I tried to use slides. It does not work in beta 10 due to this existing issue. Concerning.

[hackfrag]

I think its fixed with this commit https://github.com/driftyco/ionic/commit/580b8d5f0bd7753bc755b3b23dbc0dae164caf0b

But its not available in beta-10. So you have to wait for beta 11 :-/

[barocsi]

Thanks!

[jgw96]

Hello @barocsi thid was fixed in the above mentioned commit and will be in the beta.11 release. Thanks for using Ionic!

[hackfrag]

Can we get a rough time range when beta 11 will be released? :) The milestone beta-11 is 66% completed

[Manduro]

@hackfrag You can always use a nightly release: npm install ionic-angular@nightly

[LufoX11]

Beta 11 here and the bug is still there.

Refresh: Refresh again:

[aldo-roman]

Issue still present on beta 11!