Ion-header flickering

[lucaslevin]

Bug Report

Ionic version:

[x] 4.x (rc.0)

Current behavior:

Ion-header is very unstable in rc.0, which wasn't present in prior releases. Using the router, going back and forth makes the header stutter, removes ion-title sometimes. Is present on DevApp and iOS Simulator.

Expected behavior:

To be more stable and not stutter or loose ion-title. Works fine on browser.

Steps to reproduce:

Going into Settings -> Terms. And pressing back button. Go back and forth.

Related code:

https://github.com/lucaslevin/trainer

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 5.2.9, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 7 other plugins)

System:

   ios-deploy : 1.9.2
   NodeJS     : v10.12.0 (/usr/local/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B6

[roopeshchinnakampalli]

Yes.. We too observed in the apps which we've updated to v4 rc.0

Thanks
Roopesh

[RHinderiks]

Still happends in RC.2, Also the back button re-appears (along with the flickering) which is clickable and will break the app in some way or another

[trazek]

I haven't used a simulator but in the browser, I can recreate this for ios. Not able to recreate it for Android. @lucaslevin is this ios specific?

[roopeshchinnakampalli]

Hi trazek,

It may not replicate in browser! It’s reproduciable in Simulator. I have tried in v4 rc.2 and it’s the same!

[llighter]

I have the same problem.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.12.2
   @angular-devkit/schematics    : 7.2.2
   @angular/cli                  : 7.2.2
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 7 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/park-yunha/Library/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v10.4.0 (/usr/local/Cellar/node/10.2.1/bin/node)
   npm               : 6.5.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

iphone 6s:

[trakhimenok]

@manucorporat I see you are working on back button, just want to make sure this issue is noticed - this flickering is very annoying

[roopeshchinnakampalli]

I've tried in the final release of v4 and it's still the same! Our apps is in Prod and need this to be fixed ASAP!

[bartkooi]

Just updated to v4 final and this is fixed for us now

[roopeshchinnakampalli]

Just updated to v4 final and this is fixed for us now

We are able replicate with v4 stable release both in real device and simulator. Anyone else tried in v4 stable release.

Also I see this bug is still on deck!

Glad it's working for you :)

[DavidWiesner]

Yes it is still a issue in the stable release. The issue is also reproducible in the safari browser.
The root of the problem is that the animation remove the opacity property after transition but before the page gets removed from the dom. To fix this issue in the right way the leaving page should be removed before the opacity property was removed by a dom write.

A quickfix is to not remove the opacity property after transition ends. Therefore the last argument in the fromTo-calls in ios.transition.ts#L170-L172 and ios.transition.ts#L182 could be set to false.

[mhartington]

Hey folks! Yes this issue is on deck, and will be addressed in a future release.

[kevryan2]

@mhartington i was going to post an issue regarding a flickering of all text elements on navigation when a new page is pushed into the stack. It has been a major bug on our end, and includes the elements in the header as this issue has logged, but I believe @liamdebeasi PR might fix that... just wanted to confirm you guys planned to merge this PR for an upcoming release?

[Nazirovich]

@mhartington, thank you for your effort. I hope this will be fixed asap, we have apps is in production and we need this to be fixed before their releases.

[liamdebeasi]

Hi everyone,

I just wanted to let you all know there has been a fix created for this, and it is currently in review (#17422). I am trying to get this out the door soon.

Thanks for using Ionic!

[brandyscarney]

Linking duplicate issues: #17022 and #17297

[Gilbert1391]

Has this issue been fixed or is there any work around? I am currently experiencing this.

[liamdebeasi]

Hi everyone,

This issue has been resolved by #17422. I just published a nightly build of Ionic with this fix (4.1.0-dev.201903041834.ad20bd6). It would be great if people could test and verify that the issue has been resolved for them. If there are no major issues found, this fix should be in the next release of Ionic. Thanks!

[trakhimenok]

@liamdebeasi I've checked nightly build and the flickering gone. Thanks a lot! It was non blocking but very annoying bug.

[Gilbert1391]

I know this may be off topic and I apologize in advance, but can anybody tell me how can I test the nightly build in my app?

[trakhimenok]

@Gilbert1391 change in package.json value of dependencies > @ionic/angular to "4.1.0-dev.201903041834.ad20bd6" and run npm install

[ortoDev]

Thanks @astec, it totally works for me !!!

[ionitron-bot]

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.