bug: White flash appearing when switching between tabs on Android

[wonderdogone]

Type: bug

Platform: android 4.4 webview

when switching between tabs ONLY on Android platform, the app show a white flash. This is in 1.0.0 stable. Not using crosswalk. Forum post http://forum.ionicframework.com/t/white-flash-appearing-when-switching-between-tabs-on-android-in-1-0-0-stable/24774

[luco]

+1

[brentoneill]

Have this issues as well...

[balicekt]

+1

[feliksalbright]

+1

[feliksalbright]

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.

[sean-hill]

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

[sean-hill]

@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

[sean-hill]

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

[mitiaptest]

+1

[xibre]

+1

[princefr]

+1

[mitiaptest]

Its seems like issue with timeout

[princefr]

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

[ilyastam]

@princefr could you plz elaborate?

[casper123]

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;

};`

[xibre]

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.

[lloy0076]

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

From: Abdul Wahab [mailto:notifications@github.com] Sent: Wednesday, 10 February 2016 9:59 PM To: driftyco/ionic ionic@noreply.github.com Cc: David Lloyd lloy0076@adam.com.au 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

[AhsanAyaz]

+1 flashes on android..

[pavei]

1+

[brentoneill]

+1

[Harish-here]

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

[mitiaptest]

@Harish-here What about first time ?

[tgensol]

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

[AhsanAyaz]

@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

[robroy07]

Still the same problem here running 1.2.4-nightly-1917

[alexissusset]

+1

[brentoneill]

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

[saqueib]

@princefr please if you can elaborate on the tab structure

[joelbowen]

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

[alysdal]

+1

[tgensol]

+1

[mhartington]

Looking into this tomorrow folks! :grin:

[jgw96]

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

[ghost]

Thank you @mhartington!

[joelbowen]

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.

[jgw96]

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

[jgw96]

@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.

[andreialecu]

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.

[mhartington]

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?

[andreialecu]

@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).

[mhartington]

@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:

[mhartington]

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:

[ctcampbell]

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

[mhartington]

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

[mhartington]

Here's a quick video demoing the PR

https://youtu.be/nWSuocu64FU

[jordantomax]

+1

[mhartington]

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

[jordantomax]

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.

[mhartington]

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.

[jordantomax]

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?