Ionic serve load theme with strange behavior

Ionic Framework
1

ionic
ionic920×925 97.7 KB

The left screen is what I expected but each time I fresh F5 or hot reload page (app) it become the right. It look like old theme. If I close tab or browser and reopen it switch to the left one, then F5 it become the right again. My app base on conference template. I use Ionic 5 (cli 6.6.0). Help please !![ionic|497x500]

2

show me your scss and html

3

I use template default SCSS. I think it’s not about my scss because effects I add to Tab Icon still working (Selected tab’s icon a little bigger and label is displayed…) so I guess default scss of Tab component (and others) is not loaded. Here is my SCSS:

.tabbar {
  justify-content: center;
}

.tab-button {
  max-width: 200px;
}

ion-tab-bar {
  border-top: 1px solid #ddd;
}

ion-icon {
  transform: translateY(5px);
  transition: transform .2s ease;
}
ion-label {
  transform: translateY(5px);
  font-size: 80%;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}

.tab-selected {
  color: var(--ion-color-primary);
  ion-icon {
    transform: scale(1.3) translateY(0);
    transition: transform .2s ease;
  }
  ion-label {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s ease, transform .2s ease;
  }
} 


#myTabBar {
  transition: transform ease 0.3s, margin-top ease 0.3s;
}
.hide-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
4

please send me your html

5

Here is my html of tab

<ion-tabs (ionTabsWillChange)="ionTabsWillChange($event)">

  <ion-tab-bar #myTabBar id="myTabBar" slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon [name]="home_icon"></ion-icon>
      <ion-label>Trang chủ</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="chat-list"> 
      <ion-icon [name]="chat_icon"></ion-icon>
      <ion-label>Chat</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="nhanvien">
      <ion-icon [name]="nhanvien_icon"></ion-icon>
      <ion-label>Nhân viên</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="info">
      <ion-icon [name]="info_icon"></ion-icon>
      <ion-label>Thông tin</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon [name]="settings_icon"></ion-icon>
      <ion-label>Cài đặt</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>
6

When I inspect element (tab icon) in dev tools:
::slotted(ion-icon) {
margin-top: 2px;
margin-bottom: 2px;
font-size: 30px;
}

when it load ok (as expected) font size must be 22px

7

ion-icon {

font-size: 22px;

}

8

Sorry, it’s my bad. I fingered out that is 2 different theme. left is Android and right is iOS. When I open app in browser I choose different device in responsive tool so ionic show suitable theme.