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

[dnlaviv]

having the same issue, any workarounds?

[sharpcodepro]

Having the same issue. Translucent on headers works fine. On Tabbar - does not.

[isaiahaguilera]

having the same issue, any workarounds?

I haven't been able to find one.

[danielehrhardt]

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

Something new here?

[nesha14586]

still not working

[St0necrusher]

any news? still not worked

[ghost]

Can't believe this is still an issue, it's almost 2023. Would love for this to work properly.

[nesha14586]

Can't believe this is still an issue, it's almost 2023. Would love for this to work properly.

Everyone would love for it to work!

[JanPhill]

Any news on when this will be finally fixed? Would really love this feature!

[ItzNicDev]

By combining @TiagoDamascena's approach with some other CSS styling you get pretty close to the original blur effect

ion-tab-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

Simply added the background-color to get more control over the blur

Worked for me!

[liamdebeasi]

Hi everyone,

Here is a dev build with a proposed fix if anyone is interested in testing: 7.4.2-dev.11695832397.13fa6703

Install Example:

npm install @ionic/[email protected]

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28246, and a fix will be available in an upcoming release of Ionic Framework.

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