Ionic-framework: Setting translucent="true" not working for ion-tab-bar

[isaiahaguilera]

Bug Report

Ionic version:


[x] 4.0.2

Current behavior:

Setting translucent effect doesn't work on ion-tab-bar.
Expected behavior:

"Frozen glass" effect on ion-tab-bar on iOS.

Steps to reproduce:

Setting ion-tab-bar with translucent="true" and adding content to the page to make it scrollable. Then test and see if you can see the content scrolling under the tab bar.

Related code:

<ion-tabs>

  <ion-tab-bar translucent slot="bottom" >
    <ion-tab-button tab="news">
      <ion-icon name="paper"></ion-icon>
      <ion-label>News</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="send"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.17
   @capacitor/core           : 1.0.0-beta.17

System:

   NodeJS : v8.11.3 (/usr/local/Cellar/node@8/8.11.3_1/bin/node)
   npm    : 5.6.0
   OS     : macOS Mojave

[liamdebeasi]

Hi there,

Thanks for the issue! Did you add fullscreen to your ion-content? If you did not, the content will not appear to scroll under headers/footers/tabbars.

See the docs here: https://ionicframework.com/docs/api/content#properties

Can you try this out, and let me know if you're still seeing this issue? Thanks!

[isaiahaguilera]

Yes I did. The translucent effect seems to work on the header fine. But it doesn't on the tab bar.

<ion-content fullscreen="true">
  <social-feed></social-feed>
</ion-content>

[liamdebeasi]

Thanks for the follow up. Which browser/version are you testing this in?

[isaiahaguilera]

I am testing on an iPhone 6s Plus running IOS 12.1.4

[442623641]

same issue

[liamdebeasi]

Hi there,

Thanks for the additional info! I setup an example using some of the code you provided but was unable to reproduce this issue. I attached a screenshot of what I can see below. Would you be able to provide a repository with the code required to reproduce this issue? Thanks!

[isaiahaguilera]

@liamdebeasi I am not sure what the difference would be. One thing I forgot to mention is that I am actually installing the app with xcode and using capacitor. Maybe that could be the issue?
Here is a repo that reproduces it for me:
Repo

[liamdebeasi]

Thanks for the repo! I was able to reproduce the issue you are describing. We will look into this!

[isaiahaguilera]

Sounds Great! Are there any work arounds that you know of?

[Sampath-Lokuge]

@liamdebeasi Any feedback for this issue? Still, it is not working? "@ionic/angular": "4.3.0",

@iaguilera14 Have you find out a workaround for this?

[isaiahaguilera]

@Sampath-Lokuge No I have not. I haven't used this feature yet. Waiting until it's fixed to implement. My app is still in development so I have been working around it for now.

[quanganh206]

Same issue here. I dig into it and find out even with fullscreen content that content scroll not scroll under ther tabbar so there is no translucent for it.

[pauldunn]

I am having the same issue with Ionic 4.6.0

[startupfoundry]

As os @ionic/angular 4.11.7 this issue is still present in Capacitor apps.

[TiagoDamascena]

I am having the same issue on Ionic 5.2.1, a workaround i did is setting ion-tab-bar as absolute like this:

ion-tab-bar {
    position: absolute;
    bottom: 0;  
    left: 0;  
    width: 100%;  
}

[cdes]

Having this issue too. @TiagoDamascena solution is not perfect, I have to manually add margin or padding for the screen to see the content behind the tab-bar.

[cdes]

I've setup a codesandbox to demonstrate the issue:
https://codesandbox.io/s/ionic-translucent-tab-bar-issue-41ocn