Slidebox Refactor landed in nightly with huge API changes

See Slidebox unshift/shift issue 2382

Could someone from ionic look into this topic?

Is this fixed in the refactor?

Why donā€™t you try it @iwantwin? :wink:

1 Like

Itā€™s not my topic :stuck_out_tongue: I want to know because I plan to use it in a way that it could be affected toā€¦ But at the same time, the topic starter will be helped with it :slight_smile: I do not have a code sample floating around to test it on, no slide box in my current project yetā€¦ So thought Iā€™d ask instead :wink:

Interesting find, when I use ionic.css it works appropriately, but if I import the ionic.scss at the top of my own css (so I can leverage the variables) I then see this behavior. Going to keep looking into it and let you know what I find.

1 Like

Great job so far on the slidebox refactor, performance has jumped through the roof!

Once issue Iā€™ve noticed lately (using build 596) is if I try to swipe through the slides super fast, then the slides eventually start to slide backwards in the opposite direction Iā€™m swiping. Once this happens, swiping no longer works until I stop, let the backward slide finish animation then continue swiping.

I only see it on my actual device with my app installed. I donā€™t ever remember seeing this before switching over to the nightly builds, so I believe it was introduced with the refactor. Any thoughts?

1 Like

@ccantrell can you post a reproduce case? Iā€™m not able to get this to happen on my phone.

+1 seeing the same thing, usually if i link into a slide thats not the first one, then start swiping forward, if I do it too quick it goes back to the first slide.

im using the latest nightly where i want to use a slide box where the last slide has a button to add another slide

my current approach was to use ngrepeat on slides for all my slides except the last one, which is set in my template below the repeat

because of the nature of my repeat my inline (in the template) defined slide is always placed before the ngRepeated slides

using the update() method on the slidebox handler seems to always trigger an animation , which in my case i dont want

is there any way to disable the animation for updates or add a speed parameter as seen with the old slide() method to make it near instant?

@ccantrell, just curious, when swiping through the slides do you see a slight pause half way through each slide? My sliding isnā€™t quite as smooth as it used to be. My slides also have a full width image, so i donā€™t know if thats making the processing heavier. i donā€™t notice it quite as much on text only slides. I have an on old build before the refactor and the slides were smoother but the positioning is done quite different than it used to be.

Could you guys post a plunkr or jsfiddle clearly showing:

  1. Performance problems
  2. The directional problems

In my testing Iā€™m not seeing this, but they sound really bad and Iā€™d love to get them squashed asap.

1 Like

@andy are you testing on an actual device? As @ccantrell mentioned, it only happens on the actual device, looks great when developing on the web. Also my iPhone is a little older, its a 5. Maybe the problems arent noticeable on newer devices. When I get a minute Iā€™ll see if I can make a plunkr to demonstrate (work is crazy this week, my ionic project is just for fun/on the side). Thanks for your quick response and attention to this!

I am using a service to save the state of a slidebox so that I can reconstruct contents and position when returning to the view later. Before the refactor, everything worked smoothly. After the refactor, the slidebox generates and lands on the correct page, but all slides are detached and the slidebox appears empty. As soon as I swipe on the slidebox the slides attach and I can see them again. See code I have posted here:

Any thoughts?

do you have the selected attribute in your markup?

<ion-slide- selected="INITIALSLIDESINDEX">

@andy Sorry I still donā€™t have a minimal code example, however the app. itself is live on the Play store if itā€™s useful to install and see it from the APK - we didntā€™t feel the poor transition performance warranted delaying the first version.

In this version, on a Nexus 10, the stuttering in navigation is most evident in the move from search to a list of Ads, and from a list of Ads to the Ad detail itself.

On a far lower-powered and XT890 / Razri handset, thereā€™s an acceptably small delay before the transition takes place, but the transition itself is very smooth, both forwards and backwards (although there are some other display glitches on an XT890 as itā€™s browser component seems to be a bit of an oddball); and it seems to be the

Itā€™s the same story with an even older and less powerful Sony Xperia Ray / ST18i - thereā€™s a (slightly longer) pause, but the transition itself is extremely smooth - very much better than the Nexus 10

Iā€™ve got a slightly bust Nexus 7 to install it on, Iā€™ll give that a spin next.

@mrsean2k FYI, Iā€™ve found that older less powerful devices have generally better performance in a lot of arenas. My Galaxy S5 is a sluggish beast with my Ionic app compared to an old Droid Razr MAXX. One thing is that Android 4.4.4 has been a real performance (and feature) killer, so that may have something to do with it. Still trying to work through those issues.

@travisdahl Yes, I do. Here is some markup:

<ion-content scroll="false" has-header="true" >  
<ion-slide-box loop="false" auto-play="false" selected="activeSearchSlide" delegate-handle="searchBox" on-slide-changed="slideChanged($index)">
<ion-slide-pager></ion-slide-pager>

    <ion-slide class="hasPager">
    	<ion-content>
        <div>
        <!-- etc etc 

And the JS:

	if (currentModel.check()) {
	console.log('found currentModel');
	var newCurrentModel = currentModel.get();
	console.log(newCurrentModel);
	$scope.templates.categories = newCurrentModel.categories;
	if ($scope.templates.categories.length == 0) {
		$rootScope.somethingSelected = false;			
	} else {
		$rootScope.somethingSelected = true;	
	}
	$scope.searchString = newCurrentModel.searchString;
	console.log('retrieved categories: ', $scope.templates.categories);
	console.log('retrieved searchString: ', $scope.searchString);
	$scope.searchResults = selectedSearchBundles.get();
	$scope.restoring = true;
	$rootScope.activeSearchSlide = 2;
	$ionicSlideBoxDelegate.update();

	// $timeout(function() {
	// 	$ionicSlideBoxDelegate.select(2,1);				
	// },60);

}

@marcsyp Iā€™ve tested this on a Nexus 7 now but - with seemingly inexhaustible stupidity - I upgraded it to 4.4.4 before installing the app. on the device as it was and testing it first. If Iā€™d had any sense I could have done an A/B comparison. Meh.

Anyway with the updated version itā€™s a pretty similar experience to a 10 - maybe fewer detectable frames in the animation.

@andy I tracked down the culprit for the chunky animations. I had an image with a css blur in my slides that was slowing it down (could have sworn iā€™d already eliminated it as a problem but I guess not). Peculiar that it didnt seem to make a difference in the old version though.

As far as the jumping between screen direction when you swipe fast, i think it may be a z-index thing. I think another slide may be transitioning out and almost not visible, but the user taps it and it jumps back to that slide. I could be totally wrong but thats my best guess.

Ive also been using angular 1.3beta for a long time now so no wonder Ive been seeing so much weirdness with the transitions. Just saw your guys post about beta14 supporting this version of angular, Stoked!

@andy Thank you very very much for your great work.

but please how you get this speed in slide box ??

I am trying to make something like slide-box but without using actual slide-box, instead of it , I am using swipe event between pages but I suffer too much from the problem of slow