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

[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