Ion-tab-bar overflow Ionic 5

Hi, I’m trying to make the ion-tab-bar overflow visible but I had no luck so far.
I’d like to do something like this:

but as you can see I can only achieve the result with an ion-fab-button placed in the middle of the screen, simulating the real round button.

I tried to put this code in AND in variables.scss but as I said, I had no luck.

ion-tab-bar {
    background: #121212;
    width: 90% !important;
    max-width: 400px !important;
    border-radius: 30px;
    margin: 0px 0px 20px 5% !important;
    max-height: 56px;
    height: 56px;
    overflow: visible !important;           <---- seems not working

In my specific case I could easily use this workaround but maybe we could find a scalable solution for a general case.

Thanks in advance!


Did you solved this?


Maybe it’s too late, but it worked for me (I know, it is not the best solution, but I didn’t find other way)

I created a recursive method and in this method try to get all tab buttons, if it doesn’t, I use a setTimeout to recall the method (the setTimeout is necessary to avoid to fill the stack) and after found all the buttons, I accessed to the shadow root, and I putted some style:

private setStyle() {
    const all = document.querySelectorAll('.tab-has-icon');

    if(all.length === 0) {
      setTimeout(() => {
      }, 0);

    all.forEach(el => {
      el.shadowRoot.querySelector('.button-native').setAttribute('style','overflow: inherit')

show me your ion-fab-button css