bug: large title/back-button animation is broken in @ionic/angular 5.0.0-beta.1

Bug Report

Ionic version: [x] 5.x

Current behavior: When navigating from page A to page B, both with a large title, the back button of the entering page is displayed too early and overlaps with the large title, then jumps into position. A similar issue is visible when navigating back from page B to A, then the large title jumps into position. If no back-button is present it is working as intended.

GIF shows both cases, not working first, then without back-button:

Expected behavior: Animations smooth as butter 😃

Steps to reproduce: See example application:

• Run Cordova app on device
• Navigate to register page, navigate back, …

Related code: Sample app on Github

Other information:

• Important: The bug only occurs when running the app in WKWebview, when the app runs in mobile safari or desktop safari the animations work fine!
• I mainly used an iPhone 11 Pro (iOS 13.2.3) which has save area insets for testing, but I also reproduced it on an iPhone 7 simulator which has no save area insets
• The issue was not present in ionic 4.x, I think the migration of ion-back-button to shadow-dom causes the issue

While debugging the issue I noticed another problem: When using translucent headers the css filter is removed and reapplied when navigating which causes a brief flicker of e.g the little settings icon - you will notice in the sample application.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.9 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.0-dev.201911251821.d51e8b2
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-deploy : 1.9.2
   NodeJS     : v12.4.0 (/usr/local/bin/node)
   npm        : 6.11.3
   OS         : macOS Catalina

[liamdebeasi]

Thanks for the follow up. I have merged this fix in, and it will be in the next pre-release of v5.

As for the translucent header issue, I will link the two issues together so there is a reference of the info you provided regarding that issue.

Thanks!

[DavidStrausz]

@liamdebeasi Yes its fixed in the new dev build, thank you! Should I open another issue for the problem with translucent headers?