Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
tomasstankovic opened this issue Jun 28, 2016 · 26 comments
Closed

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

tomasstankovic opened this issue Jun 28, 2016 · 26 comments
Labels
needs: reply the issue needs a response from the user
Milestone

Comments

@tomasstankovic
Copy link

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

@tomasstankovic tomasstankovic changed the title <ion-slide> not work correctly in beta.10 bug: <ion-slide> not work correctly in beta.10 Jun 28, 2016
@jgw96 jgw96 added slides and removed range labels Jun 28, 2016
@xr0master
Copy link
Contributor

Anyfix?

@hackfrag
Copy link

+1

@jgw96
Copy link
Contributor

jgw96 commented Jun 29, 2016

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

@jgw96 jgw96 added the needs: reply the issue needs a response from the user label Jun 29, 2016
@xr0master
Copy link
Contributor

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

@GerritErpenstein
Copy link

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
Copy link

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

@jgw96
Copy link
Contributor

jgw96 commented Jul 1, 2016

@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
Copy link

javebratt commented Jul 1, 2016

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/[email protected] 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
Copy link
Contributor

jgw96 commented Jul 1, 2016

@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

@jgw96 jgw96 added this to the 2.0.0-beta.11 milestone Jul 1, 2016
@derekdon
Copy link

derekdon commented Jul 4, 2016

+1

1 similar comment
@ghost
Copy link

ghost commented Jul 5, 2016

+1

@ValterSantosMatos
Copy link

Probably related: to #7192

@schankam
Copy link

schankam commented Jul 6, 2016

Yes, same problem as #7192.

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

@GerritErpenstein
Copy link

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
Copy link
Contributor

xr0master commented Jul 12, 2016

+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
Copy link
Contributor

jgw96 commented Jul 12, 2016

@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
Copy link
Contributor

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

@alexciesielski
Copy link

alexciesielski commented Jul 13, 2016

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
Copy link

barocsi commented Jul 19, 2016

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
Copy link

I think its fixed with this commit 580b8d5

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

@barocsi
Copy link

barocsi commented Jul 19, 2016

Thanks!

@jgw96
Copy link
Contributor

jgw96 commented Jul 19, 2016

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

@hackfrag
Copy link

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

@Manduro
Copy link
Contributor

Manduro commented Jul 19, 2016

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

@LufoX11
Copy link

LufoX11 commented Aug 15, 2016

Beta 11 here and the bug is still there.

Refresh:

Refresh again:

@aldo-roman
Copy link

Issue still present on beta 11!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: reply the issue needs a response from the user
Projects
None yet
Development

No branches or pull requests