ngClass and visibility: glitch?

[DavideValdo]

Hello everybody,
so I’m creating my own tab logic by using ngClass and css visibility: .
I’m getting a really strange behavior, is my technique wrong in the first place?

The showTab functions modifies a currentTab string inside my component, through ngClass I compare that string to a literal so that I can append the current class to the item I want to display.

This is my code.

[... .component.html]
<StackLayout class="pronto-moda-tab-selector" orientation="horizontal">
        <Label text="INFO" class="pronto-moda-tab-button" (tap)="showTab('info')"></Label>
        <Label text="PHOTOS" class="pronto-moda-tab-button" (tap)="showTab('photos')"></Label>
</StackLayout>

(and so on...)

<StackLayout class="pronto-moda-details pronto-moda-tab-item" [ngClass]="{'current': currentTab=='photos'}">
(Tab content here...)
</StackLayout>

[... .component.ts]
showTab(_t: string) {
        this.currentTab = _t;
}

[app.css]
.pronto-moda-tab-item {
    visibility: collapsed;
}

.pronto-moda-tab-item.current {
    visibility: visible;
}

First I open the detail view:

Then I navigate to the photos tab

Then I navigate back to the detail view and this is what happens:

Any ideas why?
Thanks