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

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 8
Comments: 30 (9 by maintainers)

Commits related to this issue

fix(core): allow fullscreen scroll content to flow outside container for translucent tab bar (#28246) Issue number: resolves #17676 --------- <!-- Please do not submit updates to dependencies unles... — committed to ionic-team/ionic-framework by liamdebeasi 9 months ago

Most upvoted comments

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%;  
}

TiagoDamascena on Jun 12, 2020

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.

quanganh206 on Jun 21, 2019

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

cdes on Jun 30, 2020

I am having the same issue with Ionic 4.6.0

pauldunn on Jul 28, 2019

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

ghost on Dec 12, 2022

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

isaiahaguilera on May 6, 2019

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

liamdebeasi on Mar 5, 2019

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/angular@7.4.2-dev.11695832397.13fa6703

liamdebeasi on Sep 27, 2023

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

JanPhill on Apr 28, 2023

any news? still not worked

St0necrusher on Sep 12, 2022

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 on Jun 30, 2020