Ionic 5 footer button hiding behind content, instead of half stacked

Ionic Framework Ionic Angular
1

page.html

<ion-content>
<ion-row>
  <ion-col size="12">
    <p>Hello user</p>
  </ion-col>
</ion-row>
</ion-content>
<ion-footer>
    <ion-toolbar >
      <ion-row>
        <ion-col class="ion-no-padding" size="2">
          <ion-button color="dark"  class="text-on-bottom">
            <ion-icon name="list"></ion-icon>
            a
          </ion-button>
        </ion-col>
        <ion-col class="ion-no-padding" class="ion-no-padding" size="2">
          <ion-button   color="dark"  class="text-on-bottom">
            <ion-icon name="stats-chart-outline"></ion-icon>
            b
          </ion-button>
        </ion-col>
    
        <ion-col class="ion-no-padding"  size="4"  id="home">
          <ion-button size="large"  color="light" >
            <ion-icon  name="home-outline"></ion-icon>
            c
          </ion-button>
        </ion-col>
        <ion-col class="ion-no-padding" size="2">
          <ion-button  color="dark"  class="text-on-bottom">
            <ion-icon name="document-outline"></ion-icon>
            d
          </ion-button>
        </ion-col>
        <ion-col class="ion-no-padding" size="2">
          <ion-button  color="dark" class="text-on-bottom">
            <ion-icon name="share-social-outline"></ion-icon>
            e
          </ion-button>
        </ion-col>
      </ion-row>
  </ion-toolbar>
</ion-footer>

page.scss

 #home {
     overflow: auto; 
     ion-button{
       --ion-color-primary:rgb(58, 169, 166) ;
       --border-radius: 50%;
         position: absolute;
        bottom: 0px;
        transform: translate(50%, -50%);
        z-index: 9999;
     }
    }

this is looking like this.
Screen Shot 2021-03-25 at 1.54.03 PM

instead it should look like this
Screen Shot 2021-03-25 at 6.11.08 PM

2

Have you inspected the dom and see what is causing the overflow to not be visible?

3

i removed ion-toolbar then only it worked

<ion-footer>  
  <!-- <ion-toolbar> -->
      <ion-row>
        <ion-col  size="2">
          <ion-button color="dark">
            <ion-icon slot="icon-only" name="list"></ion-icon>
            
          </ion-button>
        </ion-col>
    
        <ion-col size="2">
          <ion-button  color="dark">
            <ion-icon slot="icon-only" name="stats-chart-outline"></ion-icon>
          </ion-button>
        </ion-col>
    
        <ion-col size="4"   >
          <ion-fab  vertical="bottom" horizontal="center"  >
            <ion-fab-button color="light">
              <ion-icon name="Home"></ion-icon>
            </ion-fab-button>
          </ion-fab>
        </ion-col>
    
        <ion-col  size="2">
          <ion-button  color="dark">
            <ion-icon slot="icon-only" name="document-outline"></ion-icon>
            
          </ion-button>
        </ion-col>
    
        <ion-col  size="2">
          <ion-button  color="dark">
            <ion-icon slot="icon-only" name="share-social-outline"></ion-icon>
            
          </ion-button>
        </ion-col>
      </ion-row>
        <!-- </ion-toolbar> -->
</ion-footer>

scss

ion-fab.ios ,.md{
    position: absolute;
    bottom: 32px;
  }
  ion-footer {
    border-top: solid rgb(244, 244, 244) 1px;
    
  }```

image 

![Screen Shot 2021-03-26 at 5.51.19 PM|208x50](upload://1qyxo4ict6Lp8L5VfeEXU0qD14g.png)