CODEWITHSUNDEEP
angularjsionic-framework
Martin
Martin

Reputation: 795

Ionic framework view transition is breaking

This is a weird one. I have several tabs in my (first) app, each with a few different views. And yes, the last tab to be coded is causing me grief.

When using the desktop browser there is absolutely no problems - no broken JS, the animations are smooth, everything looks great, as I transition from View 1 to View 2 in tab Dashboard, and then from View 2 to View 3.

When I build the app, and try on my iPhone (5), the transition between Views 1 and 2 is either completely broken (stops half way), or has a mini seizure (forwards and back, then forwards again) before landing on View 2. The same then can/does happen between Views 2 and Views 3. When I go check other unrelated Tab/views this never ever happens.

I am really at a complete loss, as this behaviour only occurs for these 3 views on the mobile. Nothing occurs on the desktop test environment.

I have no code to show, as I have no idea where to start with the code. No JS errors, nothing. I have commented out most of the relevant controller's JS and .html view code and just put a $timoeut with $state.go to navigate between views (rather than pressing on buttons) and the same issue occurs.

Any ideas? This is really doing my head in.

Thanks.

ps. for the sake of having code, I will add my routers code for these views, as it is pretty much the only code that hasn't been commented out - though this router code is pretty similar to that for the rest of my app (and without issue until now):

       .state('tab.dashboard-add-step-1', {
            url: '/dashboard-add-step-1',
            cache: false,
            data: {
                requireLogin: true
            },
            views: {
                'tab-dashboard': {
                    templateUrl: 'templates/tab-dashboard-add-step-1.html',
                    controller: 'DashboardAddStepOneCtrl as dashboardAddStepOne'
                }
            }
        })
        .state('tab.dashboard-add-step-2', {
            url: '/dashboard-add-step-2',
            cache: false,
            params: {
                'listing': null
            },
            data: {
                requireLogin: true
            },
            views: {
                'tab-dashboard': {
                    templateUrl: 'templates/tab-dashboard-add-step-2.html',
                    controller: 'DashboardAddStepTwoCtrl as dashboardAddStepTwo'
                }
            }
        })
        .state('tab.dashboard-add-step-3', {
            url: '/dashboard-add-step-3',
            cache: false,
            params: {
                'listing':              null,
                'listingAttributes':    null
            },
            data: {
                requireLogin: true
            },
            views: {
                'tab-dashboard': {
                    templateUrl: 'templates/tab-dashboard-add-step-3.html',
                    controller: 'DashboardAddStepThreeCtrl as dashboardAddStepThree'
                }
            }
        })

Update, it gets weirder: I seem to have narrowed down the problem to the function that does the transition between Steps. However the function works perfectly fine/transition is smooth if called from a $timeout. But when called by ng-click or ng-submit it acts poorly (jumpy/broken transition).

This is the simple code:

    $scope.doStepOne = function() {       
        $state.go('tab.dashboard-add-step-2'); 
    };

    $scope.timer = $timeout(function() {
       $scope.doStepOne(); //the transition when called from here works perfectly         
    }, 5000);

But when the same function is called from ng-submit or ng-click the transition is messy/ugly:

  <button class="button button-calm" ng-click="doStepOne()"> Continue to Step 2</button>

Any thoughts? I can not see how an event based call to the function would behave differently to that of $timeout.

Upvotes: 1

Views: 442

Answers (1)

Martin
Martin

Reputation: 795

It turns out to be an iOS9 related problem, I tried it on a device with iOS8 and it worked fine.

..... this lead me to the following patch which solved the problem, yay!!

Info:

http://blog.ionic.io/ios-9-potential-breaking-change/

Patch:

https://gist.github.com/IgorMinar/863acd413e3925bf282c

Upvotes: 1

Related Questions