V2 Beta11: White flicker in navbar

[marianocodes]

Short description of the problem:

If the background color of the navbar is ovewritten there is a

What behavior are you expecting?

Steps to reproduce:

1. Change Navbar's color overwriting the sass variable $toolbar-background
2. Push a new page

File: app.variable.scss

$toolbar-background: #000;

File: home.ts

import {Component} from '@angular/core';
import {AboutPage} from '../about/about';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  aboutPage = AboutPage;
}

File: home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <button [navPush]="aboutPage">Go To</button>
</ion-content>

Which Ionic Version? 2.beta.11

Other information: Only happens in iOS. It can be reproduced from the browser

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.3.1
Gulp version:  CLI version 1.2.2
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0
ios-deploy version: 1.8.6 
ios-sim version: 5.0.8 
OS: Mac OS X Yosemite
Node Version: v5.5.0
Xcode version: Xcode 7.2.1 Build version 7C1002 

[danielcrk-cn]

Have a look at the last two posts (by me) here for hopefully some additional info;
https://forum.ionicframework.com/t/how-to-define-all-the-header-color/63005/4

[jgw96]

Hello! Thanks for opening an issue with us! This is actually correct behavior as their is a fade animation on the navbar. Thanks for using Ionic!

[marianocodes]

hi @jgw96! I don't think you should close this issue. I don't feel this is native behavior of the nav bar. If you see when the transition starts the next page is completely white, so there is a white flicker. I had to implemented the work around suggested by @danielcrk-cn . Take a look to the gif when the page is pushed the flicker shows up

[danielcrk-cn]

Hi Justin,

I'm sorry if I'm mistaken, but I highly doubt that this is intended behavior, as it hasn't looked like that ever. There should of course be a fade effect, but between the title and icons, not a fade out to white in the middle of animation.

[danielcrk-cn]

Also, subjectively, that white flash looks kind of horrible >_<

[jgw96]

Hello all! We have overhauled alot of the navigation internals in beta.12 and that should solve this issue 😄 I will close this issue when I have confirmed. Thanks for using Ionic!

[kelvindart]

@jgw96 this excites me hugely 😁 - navigation is a bit of a pickle in my opinion at the moment and I know I have raised a few issues in the past so I look forward to the beta.12 release. Can you share any details on release date? No matter how big or small? 😛

[jgw96]

@kelvindart We are definitely getting closer now but the release date is still just ASAP 😄

[kelvindart]

Awesome news! Either way I look forward to the next release 😀

[jgw96]

We all do haha 😄 its gonna be awesome

[jgw96]

Still seeing this in rc.0 unfortunately, added to RC.1 milestone

[mlynch]

This is happening with these two background fades in the iOS transition. I'm guessing we added these to make it easier to transition between navbars that had very different background colors, but I'm not sure what the general use case for these lines is:

entering: https://github.com/driftyco/ionic/blob/master/src/transitions/transition-ios.ts#L95

leaving: https://github.com/driftyco/ionic/blob/master/src/transitions/transition-ios.ts#L176

However, I don't think the solution is to comment these out because that creates subtly different behavior than what we want.

Need to think a bit more about this...

[mlynch]

Okay yea the fade here seems almost entirely to support cases where the navbars differ in color, but when they are the same custom color this fails. Looking into a solution.

[mlynch]

I think we need to set the entering and leaving background to the color of the leaving and entering navbar's before doing the animation. That way the fade happens not from "white" but from the old navbar color.

[manucorporat]

@mlynch so we should animate the background-color instead of the opacity?

• not sure if background-color animations are GPU accelerated like opacity ones are
• also, what about developers using images or gradients as background

[jgw96]

From my understanding animating background-color is not GPU accelerated, at least in chrome, and will trigger paints which we don't want happening in the middle of an animation.

[mlynch]

This has been fixed!