Ionic-framework: bug: White flash appearing when switching between tabs on Android

Any word about the status of this issue?

Having same issue. Any updates?

+1

Please provide a minimal example that has this issue.

Just create a new ionic app (tabs template) change the background to any color either then white. build and run on android device (4.4, i'm tested on nexus 5) and you will notice that there is a white flick for few millis on every tab change.

I have found that this is due to ion-header-bar being redefined in each view. I moved ion-header-bar to my main layout template and no longer see the flicker. I believe the default generated project puts the header bar in each view which is why you see it there as well.

the 'ion-header-bar's is automatically generated for me, where (and how) you manually use it ?

So @GentryRiggen you mean the ion-nav-bar?

@mhartington I am using ion-side-menu with a ion-tabs inside of the ion-side-menu-content.

<ion-side-menus>
  <ion-side-menu side="left" class="left-side-menu">
    <ion-content drag-content="false" overflow-scroll="false" direction="y" delegate-handle="leftMenu">
      <div class="list">
        <a menu-close class="item item-icon-left" >Something</a>
        <a menu-close class="item item-icon-left" >Something</a>
        <a menu-close class="item item-icon-left" >Something</a>
      </div>
    </ion-content>
  </ion-side-menu>

  <ion-side-menu-content>
    <ion-header-bar align-title="center" class="bar-positive">
      <button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
      <div class="titles">
            <h>TITLE</h1>
      </div>
    </ion-header-bar>

    <ion-tabs class="tabs-positive tabs-icon-only dark-background">
      <ion-tab>
        <ion-nav-view name="tab-1"></ion-nav-view>
      </ion-tab>

      <ion-tab>
        <ion-nav-view name="tab-2"></ion-nav-view>
      </ion-tab>

      <ion-tab>
        <ion-nav-view name="tab-3"></ion-nav-view>
      </ion-tab>
    </ion-tabs>
  </ion-side-menu-content>

</ion-side-menus>

Don't use the ion-header-bar for that, use the ion-nav-bar.

@mhartington Im using the 'ion-nav-bar' and the screen flickering (while moving between tabs)...
so how do you suggest to fix it ?

the simple tabs "starter" from ionic built for android shows the flash between navigating and that i believe uses ion-nav-bar.

Hmm, I'm not seeing it in my tests.

https://youtu.be/_ja8a08iSPE

You can see it in the video .. It's the white screen flash when you change tabs.. It appears for just few milliseconds... If you want the see that more clearly change the background color to red, blue or any dark color .

Are you talking about the fading nav bar

He is talking about the white screen (ion-content perimeter) that briefly appears when you switch tabs.
You can clearly see it in your video when you switch the first time from "Status" to "Chats". But it actually appears every time.

@mhartington I attached a video form my app (slow motion) you can clearly see it append there.
I would like to take a action and help you guys to solve that issue, but I need at least a start point from you.. where should I start ?

youtube link : https://youtu.be/TTuNPlL6Fmg

Thanks.

I've looked at the code and to me the error is in the tabSelected function (ionTab directive)
It seems to hide the previous tab before showing the new one.

This dirty hack i've made seem to work. But I'd love to see a proper fix.
Just add a timeout around $ionicViewSwitcher.viewEleIsActive(childElement, false);

Line 55025 of ionic.bundle.js

$timeout(function () {
 $ionicViewSwitcher.viewEleIsActive(childElement, false);
}, 100);

This is happening to me with:

• Ionic, v1.0.1
• Cordova 5.3.3

I'm running Android 5.1.1 on a Nexus 4.

To reproduce it, I just simply make a "tabs" starter app, change the colour of the navbar to blue (e.g. by changing -stable to -positive) and the flickering becomes obvious. It does actually flicker with the white navbar but you can't see white on white flickering.

I have attempted to add styles to force the transition-time to 0ms on Android and verified that the app has applied these styles to any header item by checking with an attached chrome inspector and inspecting the computed CSS values. I double checked by removing the styles and verifying they went from 0ms to some other number (0.2ms or 0.5ms - and actually about as fast as the flashing effect).

I tried doing @didbarbosa fix but Chrome on the browser and the phone app both complained that $timeout was not defined. When I logged the value of $timeout, it was indeed not defined.

@lloy0076 you need to inject it into the directive

IonicModule
.directive('ionTab', [
  '$compile',
  '$ionicConfig',
  '$ionicBind',
  '$ionicViewSwitcher',
  '$timeout',
function($compile, $ionicConfig, $ionicBind, $ionicViewSwitcher,$timeout) {

@didbarbosa - Actually I just noticed that my version of Ionic isn't the latest release; thus I changed my "bower.json" to read:

{
"name": "HelloIonic",
"private": "true",
"devDependencies": {
"ionic": "driftyco/ionic-bower#~1",
"platform.js": "platform#~1.3.0"

...and would you believe it theres no flickering even without the $timeout solution...

Maybe if you tried the same with the CSS transition solution it might just "fix" itself - although I hate problems that magically fix themselves like that.

Yes it seems to be disapeared with the nightly release.
Good news :)

Actually it is not fixed for me.

not fixed for me 2 :\

Any news about this issue?

I have this issue on iOS as well.

@harryzun regarding iOS please see https://github.com/driftyco/ionic/issues/4395

On iOS it's not the same issue

I just started noticing this on Android too sometime after I upgraded to v1.1. Not sure when it started though.

it started around v1

If anyone has a (temporary) fix, I would love to hear it.

I'm the same bug... anybody have more info?? :octopus:

Probably not related, but I had a similar issue earlier, and for some bizarre reason deleting cache: false from my state definition for the offending sibling tab state cleared the issue. I have zero idea why, as we're using this same pattern, with the same controller+template combo, in 3 other places in our tab setup with out any issue.

update

So I just spent a little bit of time trying to get down to the bottom of the issue we saw, kinda interesting and a little bit of naivety on my part lead to the flicker of black prior to stateChangeSuccess.

So as mentioned above, we use the same pattern all over our application, but with one key difference: this state actually had a API backed resolve in its state definition to get around a shortcoming we currently have on our back end that we didn't need to be accounted for with the other x3 states that use this pattern.

The "chat" state was a sibling of main the state for the tab. To reach this state you'd simply click on a member in the main view and you'd end up in the sibling chat state. When navigating into it from the sibling, no black flash was observed, the main state would be visible until the resolve had finished, and then normal navigation would finish. When navigating back to the tab (from another tab) with the chat view as the current state in history, ui-router + ionic would execute the swap to the new tab immediately, but the black screen would be visible until the resolve had been completed.

This also makes sense as to why removing cache: false and defaulting to true fixed the issue.

Makes perfect sense when you think about it I guess. Hopefully this might be able to save someone a headache if they stumble upon this via google (same way I did).

I tracked this down to this line:
https://github.com/driftyco/ionic/blob/af1bfef327e685585244c6051c4d38b98aa6c62a/js/angular/service/viewSwitcher.js#L194

          if (renderStart && renderEnd) {
            // CSS "auto" transitioned, not manually transitioned
            // wait a frame so the styles apply before auto transitioning
            //$timeout(onReflow, 16); <- original
            onReflow(); // removes flicker
          } else if (!renderEnd) {

It's the cause for the one frame flicker when tabs are switched, because the new tab is not set to visible until 16 ms later.

I'm not sure what the point of that line is when tabs are involved, but if you replace the $timeout call with a simple method call of onReflow(), perceived performance is greatly improved and there is no more flicker. Not even in the nav bar.

@mhartington any thoughts regarding this? Perhaps it should be made configurable at the very least.

Seems to be introduced by https://github.com/driftyco/ionic/commit/8ebde73d0b8afac1bf1c1787c90a72a28a88bc3a from @adamdbradley

Edit: a better fix seems to be to just change the if condition to:

if (direction !== 'swap' && renderStart && renderEnd) {

Edit2: An even better fix that gets rid of any potential side effects is to replace the $timeout call with:
ionic.requestAnimationFrame(onReflow);
I will send a PR with it.

Opened PR https://github.com/driftyco/ionic/pull/4654

Very well done!
Fixes the issue to me.

Thanks a lot mate.

Didn't work for me... I've updated my ionic-angular.js file but I see no change even if I'm increasing the initial timeout value. Am I missing something?
For the nav bar flickering I used this fix https://forum.ionicframework.com/t/flickering-when-navigating-via-tabs-on-android/27281 but now content is it flickering.

Finally it's working but it's still flickering once the first time for each tab, any idea why?

Is there any release plan on this issue? 1.2 or 1.3 ?

It's included in the recent 1.2 release.

+1 , is there any other solutions?

wow this is still going on.eh..Was figuring the core team would have a good idea what this wasAnyone have a good pointer to source code we might start experimenting with?

Did 1.2 fix this? There was a commit in there that should have addressed this issue.

The bug is still here on 1.2 to 1.2.2

I tried again and it is solved if you put :

ionic.requestAnimationFrame(onReflow);  

as he said, and not :

$timeout(function() {
              ionic.requestAnimationFrame(onReflow);
            });

Obviously, $timeout is doing something

@mlynch maybe you remember what this was for? https://github.com/driftyco/ionic/commit/d0246cf975bb4022eb890d3b0c28964e3065644c#diff-e25bdd32bda2f4f00f01c823ec86b1f3

Seems to have broken it again.

Maybe this is why :

if code is queued using $timeout, it should run after the DOM has been manipulated by Angular, and after the browser renders (which may cause flicker in some cases)

Reviewing for 1.2.5

Unfortunately, this broke #4782 which caused the back view to sometimes not animate correctly. Removing $timeout is probably too simplistic of a solution for this.

still have the issue even when I remove the timeout..

+1

Have this issues as well...

+1

+1

note, updating your bower.json helps (correct highlighting), but there is a slight delay as mentioned

{
"name": "HelloIonic",
"private": "true",
"devDependencies": {
"ionic": "driftyco/ionic-bower#1.7.12", //HERE, MAKE SURE IT'S UPDATED
"aws-sdk-js": "~2.0.9",
"bootstrap": "~3.2.0",
"platform.js": "platform#~1.3.1"
}
}

Anyway, the slight flash is only on android, and it's just a fraction of a second.

Can anyone confirm that 1.2.3 "copenhagen" fixes this issue?

@mhartington @mlynch I can confirm this is still not working property with version 1.2.3. Take a look at these sequence of screenshots.

I'm first starting on my Bills tab like this:

I then tap on my Roommates tab and the following steps occur (which causes the blink):

1. App says "Bills" for title but showing the cached "Roommates" tab
   
2. App then removes all content, but still shows "Bills" title
   
3. App shows "Roommates" content
   
4. App fades in "Roommates" title
   

With all of these steps combined it creates a hideous flicker when switching tabs.

To see the bug in affect, take a look at this video:
https://dl.dropboxusercontent.com/u/97539058/Bugs/tabs-bug.mp4

Hey I realized that my bug was an issue with using SQLite in my application. Sorry for the confusion.

+1

+1

+1

Its seems like issue with timeout

the issue just vanished for me! the issue was related to the way i had built my tabs!
make sure that you build it in the good way, navigation inside tabs too. take care about controllers parents ==> child

no more white flash

@princefr could you plz elaborate?

For iOS, I had to replace css[ionic.CSS.TRANSITION_DURATION] with css.WebkitTransition in ionic.bundle.js line 47715 and 47750

`// iOS Transitions
// -----------------------
provider.transitions.views.ios = function(enteringEle, leavingEle, direction, shouldAnimate) {

function setStyles(ele, opacity, x, boxShadowOpacity) {
  var css = {};
  css.WebkitTransition = d.shouldAnimate ? '' : 0;
  css.opacity = opacity;
  if (boxShadowOpacity > -1) {
    css.boxShadow = '0 0 10px rgba(0,0,0,' + (d.shouldAnimate ? boxShadowOpacity * 0.45 : 0.3) + ')';
  }
  css[ionic.CSS.TRANSFORM] = 'translate3d(' + x + '%,0,0)';
  ionic.DomUtil.cachedStyles(ele, css);
}

var d = {
  run: function(step) {
    if (direction == 'forward') {
      setStyles(enteringEle, 1, (1 - step) * 99, 1 - step); // starting at 98% prevents a flicker
      setStyles(leavingEle, (1 - 0.1 * step), step * -33, -1);

    } else if (direction == 'back') {
      setStyles(enteringEle, (1 - 0.1 * (1 - step)), (1 - step) * -33, -1);
      setStyles(leavingEle, 1, step * 100, 1 - step);

    } else {
      // swap, enter, exit
      setStyles(enteringEle, 1, 0, -1);
      setStyles(leavingEle, 0, 0, -1);
    }
  },
  shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

};

provider.transitions.navBar.ios = function(enteringHeaderBar, leavingHeaderBar, direction, shouldAnimate) {

function setStyles(ctrl, opacity, titleX, backTextX) {
  var css = {};
  css.WebkitTransition = d.shouldAnimate ? '' : '0ms';
  css.opacity = opacity === 1 ? '' : opacity;

  ctrl.setCss('buttons-left', css);
  ctrl.setCss('buttons-right', css);
  ctrl.setCss('back-button', css);

  css[ionic.CSS.TRANSFORM] = 'translate3d(' + backTextX + 'px,0,0)';
  ctrl.setCss('back-text', css);

  css[ionic.CSS.TRANSFORM] = 'translate3d(' + titleX + 'px,0,0)';
  ctrl.setCss('title', css);
}

function enter(ctrlA, ctrlB, step) {
  if (!ctrlA || !ctrlB) return;
  var titleX = (ctrlA.titleTextX() + ctrlA.titleWidth()) * (1 - step);
  var backTextX = (ctrlB && (ctrlB.titleTextX() - ctrlA.backButtonTextLeft()) * (1 - step)) || 0;
  setStyles(ctrlA, step, titleX, backTextX);
}

function leave(ctrlA, ctrlB, step) {
  if (!ctrlA || !ctrlB) return;
  var titleX = (-(ctrlA.titleTextX() - ctrlB.backButtonTextLeft()) - (ctrlA.titleLeftRight())) * step;
  setStyles(ctrlA, 1 - step, titleX, 0);
}

var d = {
  run: function(step) {
    var enteringHeaderCtrl = enteringHeaderBar.controller();
    var leavingHeaderCtrl = leavingHeaderBar && leavingHeaderBar.controller();
    if (d.direction == 'back') {
      leave(enteringHeaderCtrl, leavingHeaderCtrl, 1 - step);
      enter(leavingHeaderCtrl, enteringHeaderCtrl, 1 - step);
    } else {
      enter(enteringHeaderCtrl, leavingHeaderCtrl, step);
      leave(leavingHeaderCtrl, enteringHeaderCtrl, step);
    }
  },
  direction: direction,
  shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

};`

Seems to be fixed for me when I changed this line https://github.com/driftyco/ionic/blob/master/js/angular/service/viewSwitcher.js#L142 to be:

callback && ionic.requestAnimationFrame(callback);

Not sure if it's a correct way to fix this though.

Does this occur on some releases of iOS too (remembering that the report is on Android releases)?

From: Abdul Wahab [mailto:[email protected]]
Sent: Wednesday, 10 February 2016 9:59 PM
To: driftyco/ionic [email protected]
Cc: David Lloyd [email protected]
Subject: Re: [ionic] bug: White flash appearing when switching between tabs on Android (#3907)

For iOS, I had to replace css[ionic.CSS.TRANSITION_DURATION] with css.WebkitTransition in ionic.bundle.js line 47715 and 47750

`// iOS Transitions
// -----------------------
provider.transitions.views.ios = function(enteringEle, leavingEle, direction, shouldAnimate) {

function setStyles(ele, opacity, x, boxShadowOpacity) {
var css = {};
css.WebkitTransition = d.shouldAnimate ? '' : 0;
css.opacity = opacity;
if (boxShadowOpacity > -1) {
css.boxShadow = '0 0 10px rgba(0,0,0,' + (d.shouldAnimate ? boxShadowOpacity * 0.45 : 0.3) + ')';
}
css[ionic.CSS.TRANSFORM] = 'translate3d(' + x + '%,0,0)';
ionic.DomUtil.cachedStyles(ele, css);
}

var d = {
run: function(step) {
if (direction == 'forward') {
setStyles(enteringEle, 1, (1 - step) * 99, 1 - step); // starting at 98% prevents a flicker
setStyles(leavingEle, (1 - 0.1 * step), step * -33, -1);

} else if (direction == 'back') {
  setStyles(enteringEle, (1 - 0.1 * (1 - step)), (1 - step) * -33, -1);
  setStyles(leavingEle, 1, step * 100, 1 - step);

} else {
  // swap, enter, exit
  setStyles(enteringEle, 1, 0, -1);
  setStyles(leavingEle, 0, 0, -1);
}

},
shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

};

provider.transitions.navBar.ios = function(enteringHeaderBar, leavingHeaderBar, direction, shouldAnimate) {

function setStyles(ctrl, opacity, titleX, backTextX) {
var css = {};
css.WebkitTransition = d.shouldAnimate ? '' : '0ms';
css.opacity = opacity === 1 ? '' : opacity;

ctrl.setCss('buttons-left', css);
ctrl.setCss('buttons-right', css);
ctrl.setCss('back-button', css);

css[ionic.CSS.TRANSFORM] = 'translate3d(' + backTextX + 'px,0,0)';
ctrl.setCss('back-text', css);

css[ionic.CSS.TRANSFORM] = 'translate3d(' + titleX + 'px,0,0)';
ctrl.setCss('title', css);
}

function enter(ctrlA, ctrlB, step) {
if (!ctrlA || !ctrlB) return;
var titleX = (ctrlA.titleTextX() + ctrlA.titleWidth()) * (1 - step);
var backTextX = (ctrlB && (ctrlB.titleTextX() - ctrlA.backButtonTextLeft()) * (1 - step)) || 0;
setStyles(ctrlA, step, titleX, backTextX);
}

function leave(ctrlA, ctrlB, step) {
if (!ctrlA || !ctrlB) return;
var titleX = (-(ctrlA.titleTextX() - ctrlB.backButtonTextLeft()) - (ctrlA.titleLeftRight())) * step;
setStyles(ctrlA, 1 - step, titleX, 0);
}

var d = {
run: function(step) {
var enteringHeaderCtrl = enteringHeaderBar.controller();
var leavingHeaderCtrl = leavingHeaderBar && leavingHeaderBar.controller();
if (d.direction == 'back') {
leave(enteringHeaderCtrl, leavingHeaderCtrl, 1 - step);
enter(leavingHeaderCtrl, enteringHeaderCtrl, 1 - step);
} else {
enter(enteringHeaderCtrl, leavingHeaderCtrl, step);
leave(leavingHeaderCtrl, enteringHeaderCtrl, step);
}
},
direction: direction,
shouldAnimate: shouldAnimate && (direction == 'forward' || direction == 'back')
};

return d;

};`

—
Reply to this email directly or view it on GitHub https://github.com/driftyco/ionic/issues/3907#issuecomment-182324500 . https://github.com/notifications/beacon/ABHsBD1Sp3tXsq8707UTfdVHgqSlxI0zks5pixaSgaJpZM4E82pl.gif

+1
flashes on android..

1+

+1

guys just "cache : true" in your "state" so that your page been cached before extract and rendering goes smoothly

@Harish-here What about first time ?

Yeah, it is really not a good idea to use cache: true only for these purpose

@Harish-here . . I have an app that uses the same state for different pages. I.e. it is a detail view which takes some $state params. Since its the same view with different content, I can't use cache:false :)
And it doesn't seem to be a good idea for this particular problem either

Still the same problem here running 1.2.4-nightly-1917

+1

@princefr - yes, please elaborate on what the proper markup would be for the tabs to alleviate this issue

@princefr please if you can elaborate on the tab structure

This is still an issue for me and quite frustrating. Is there any movement, or any understood resolution?

+1

+1

Looking into this tomorrow folks! :grin:

There is a related issue with iOS that I will link here later tonight. I was able to repro it.

Thank you @mhartington!

To add some more context, in my situation I found the bug to be present with the following:

Index.html
<ion-nav-view></ion-nav-view>

view-1.html
<ANY ELEMENT>Something</ANY ELEMENT><ion-nav-view></ion-nav-view>

sub-view-1.html
<ANY></ANY>

But NOT present when I removed the <ANY ELEMENT> from view-1.html.

So it is, in my case, that I am unable to achieve the desired effect of showing a child-state inside of a parent state, without completely replacing the parent state content.

I tried ALL manner of ui-view/ion-view/ion-nav-view/ion-tabs/ion-pane/etc. Absolutely nothing worked.

This issue is describing the same bug but on iOS https://github.com/driftyco/ionic/issues/5888

@mhartington can you test with the conference app? Me and @brandy were both able to repro some slight flash when switching through the tabs. This was using the emulator and not an actual device.

The bug in #5888 is for ionic2 though, I'm not sure the code bases are similar enough for it to be the same bug.

hey yall, thanks for being patient on this one, really appreciate it :smile:

So looking over things, this should be effecting both iOS and Android with ionic 1.2.4, correct?

Also, has anyone been able to recreate this with the tabs starter app?

@mhartington it's there in the tabs starter app, you just need to be very observant. Also, I fixed this in https://github.com/driftyco/ionic/pull/4654 but apparently that broke something else, and then when that got fixed, this was broken again.

You can see it in the video you posted: https://www.youtube.com/watch?v=_ja8a08iSPE&feature=youtu.be Just notice how instead of the new tab appearing, there's a very brief white flash (1 frame, it's very quick).

@andreialecu alright, seeing it as well,

https://youtu.be/R5EafRKTst0

Same clip, just slowed down a lot

Looking at the PR, going to see what can be done and keep it from breaking other things :grin:

Hey all! So I think I've been able to make some head way on this. I've opened a PR that looks good in my tests, but would love to hear some feedback from you first.

The changes have been made to viewFlicker branch

https://github.com/driftyco/ionic/pull/5937

If you wouldn't mind pulling down the code, building Ionic from source, and testing out the changes in your app, we can see if this fixes things and nip this bug :shipit:

Awesome. Is this an android specific fox or will iOS also look better?

@ctcampbell android ATM. In my tests, I wasn't able to cause a flicker on iOS

Here's a quick video demoing the PR

https://youtu.be/nWSuocu64FU

+1

@jordantomax does this mean that the PR works well for you? :grin:

Whoops, no sorry. Just subscribing to the feed. I can test it out though. Do I need to compile something in order to use, I see that the release wasn't touched by your commit.

Ahh

You can follow these steps.

git clone https://github.com/driftyco/ionic.git
cd ionic 
git checkout viewFlicker
npm install
gulp build

And you should have the compiled code in dist/js/ionic.bundle.js
You should be able to just copy/paste that code into a test project and try it out.

Seems to be working well in the test tabs application. I'm still having problems with flashing in my app though. I'm using tabs and menu, but tabs only appear on certain pages. I want to take a video to show you, how do I go about doing that?

Would you instead be able to create a minimal codepen or git repo that I could clone and test out?
Just a similar set up of your app

Good idea. I will try to do that tonight or tomorrow morning. Thanks for your help.

@mhartington I just tested it in my app and the flicker seems to be gone. :+1:

I have tested the fix using the tabs starter on a Nexus 6 running the Android N preview, a Nexus 7 2013 running 6.0.1, a Moto X 2014 running 5.1 and a Nexus 7 2013 running 4.4.4 and did not see any flashing on any of those devices. Awesome !

@jordantomax any luck on getting that example together?

@mhartington sorry, have been totally swamped! I hope to work on it on Sunday.

@mhartington I just tested this on my app i'm building and android and iPhone seem to be fixed with #5937.

@jordantomax, have you had a chance to put together an example?

Thanks,
Dan

Hi there,

This fix works well, but it looks the native-page-transitions plugin is then not working properly... transitions are doing crazy things after I put this fix. Do you think it is linked ?

@tgensol Use default parameters for this plugins, it works well with this fix !

Hello all! As it seems through my testing and you guys testing the fix seems to be working I'm gonna go ahead and close this issue for now. @jordantomax if you get a chance to throw that test together feel free to post and I'll gladly reopen (:. Also @tgensol if the above solution does not fix your issue would you mind opening a separate issue on the bug hour having? Thanks everyone!

With the breaking changes in ionic repo, how do we compile and build this

1.x branch is now Ionic 1.3.1. If you clone the repo and checkout the branch, you should be able to run gulp build to generate the distributable files. Please let me know if you have any issues with this.

Thanks,
Dan

Thanks. already downloaded the dist manually :D

+1

I have fixed this. This happens related to ionic view update ionic bar bevavior: new bar created on before enter and hides old bar (current) an it blinks. Solution is defer hiding current bar to after enter event. Please write to me if you have some questions.

@smcreator could you share the code snippets?

I still got same problem .... any code snippets Thanks

I think this issue is fixed in recent ionic versions.

I had the same problem and the response from @princefr was the key. I had multiple navigation bars over the views. While adding the ion-nav-bar only on the top of my tabs.html file I fixed the problem:

<ion-nav-bar class="my-custom-bar">
  <ion-nav-back-button class="button-clear">
    <i  class="button button-icon ion-android-arrow-back" ng-click="vm.goBack()"></i>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-tabs>
....
</ion-tabs>

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.