bug: removed toolbar bottom padding if tab-bar[style="display: none"]

[rdlabo]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [x] v6.x
• [ ] Nightly

Current Behavior

https://github.com/ionic-team/ionic-framework/pull/25746 is removed toolbar bottom padding if tab-bar[style="display: none"].

The solution of not displaying the tab-bar on the page after the push transition is often used.

<ion-tabs>
  <ion-tab-bar slot="bottom" style="display: none">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
</ion-tabs>

This is reproduced in v6.2.3.

Expected Behavior

if tab-bar[style="display: none"], toolbar has bottom padding.

Steps to Reproduce

Add code to tabs.page.ts to control the display of the tab bar.

import { Component } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {

  constructor(private router: Router) {}

  public async ngOnInit() {
    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params: NavigationEnd) => {
      const tabBar = document.querySelector('ion-tab-bar') as HTMLElement;
      if (tabBar) {
        tabBar.style.display = ['/tab1', '/tab2', '/tab3'].indexOf(params.urlAfterRedirects) >= 0 ? 'flex' : 'none';
      }
    });
  }
}

Then add a child page with a push transition and add ion-footer to reproduce.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.19.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.2.3
   @angular-devkit/build-angular : 14.1.2
   @angular-devkit/schematics    : 14.1.2
   @angular/cli                  : 14.1.2
   @ionic/angular-toolkit        : 5.0.3

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I can definitely understand how this new behavior is unexpected. However, Ionic is working as intended here.

Prior to the fix in https://github.com/ionic-team/ionic-framework/pull/25746, the ion-footer incorrectly had safe area padding on the bottom when used inside of tabs with a tab bar. The functionality that is being described here was built on the assumption that ion-footer would always have the safe area in tabs. As a result, when the ion-footer bug was fixed, the described functionality broke.

I will also note that we do not recommend the pattern that is described in this thread. Instead, we recommend rendering a route outside of the tabs context if developers want the tab bar to be hidden. Moving to that pattern should resolve the issue. Alternatively, you could manually add the safe area padding in your application if you would prefer not to move to the new pattern:

ion-footer ion-toolbar:last-of-type {
  padding-bottom: var(--ion-safe-area-bottom, 0);
}

I am going to close this as this is not a bug in Ionic.

[ionitron-bot[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.