question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: IOS large title overlaps with back button

See original GitHub issue

Bug Report

Ionic version: [x] 5.0.0

Current behavior: when navigating for the first time from one on the tabs to child page and then click the back button the problem doesn’t occur. but if you after that moved to another tab and navigate from it to a child page you will see the title of the first tap overlaps with the current child back button.

Expected behavior: first tab title should not appear in a child page of another tab

Steps to reproduce:

1 - from tab 1 click on the button which will navigate to details-page 1 then go back to tab1 2 - go to tab 2 and click on the button which will navigate to details-page 2, after that click on back-button now you will notice that tab 1 large title overlaps the tab2 header then it will disappear

Related code:

Github(https://github.com/3adeling/ionic-5-header-title-issue)

Ionic info:

Ionic:

   Ionic CLI                     : 6.0.2 (C:\Users\adela\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.803.25
   @angular-devkit/schematics    : 8.3.25
   @angular/cli                  : 8.3.25
   @ionic/angular-toolkit        : 2.1.2

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Utility:

   cordova-res : 0.9.0
   native-run  : not installed

System:

   NodeJS : v12.14.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.13.6
   OS     : Windows 10```

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
liamdebeasicommented, Feb 14, 2020

It looks like this is happening with the following route setup:

/tabs/tab-one --> /child

Leaving the tabs context causes app-tabs/ion-tabs to be considered the “leavingEl”. This causes the framework to incorrectly select the leaving large title. For example when on Tab 2, it will (incorrectly) select the title for Tab 1; however, since Tab 1 is hidden, its dimensions will all be 0 so the animating large title will also be in the wrong location.

The following route setup does not cause the issue because only tab-one is considered the leavingEl, not the entire tabs context:

/tabs/tab-one --> /tabs/child

I will look into a fix for the issue and will post an update here when I have more to share. Thanks!

1reaction
liamdebeasicommented, Feb 19, 2020

Glad to hear the issue is fixed. I am going to keep the issue open until I merge the fix in. Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

bug: IOS large title overlaps with back button · Issue #20482
This causes the framework to incorrectly select the leaving large title. For example when on Tab 2, it will (incorrectly) select the title...
Read more >
Overlapping titles in navigation bar - Stack Overflow
Sometimes UITableViewController 's title is overlapping with UIViewController 's title when I click on back button.
Read more >
Large Title Navigation Bar Overlap… | Apple Developer Forums
Large Title Navigation Bar Overlaps when switching tabs · Scroll down until the large title collapses into the small title · Switch to...
Read more >
The Large Title UINavigationBar Glitches and How to Fix Them
Check out this article to find out the glitches you might get when adopting the large title UINavigationBar, and how to fix each...
Read more >
Overlapping Navigation Titles In SwiftUI - Dabbling Badger
As far as I can tell, this bug only shows up if you: 1) have the navigation title displayMode of a destination view...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found