Стили применяются только после прокрутки

Question

Существуют вкладки, которые реализуются с помощью angular, при смене языка на другой меняется направление, а также активная вкладка (активная вкладка имеет желтый цвет фона). Проблема в том, что при смене языка фон активной вкладки на ios применяется только после прокрутки страницы, на android и на рабочем столе все работает отлично. Буду очень признателен за помощь. Вот код: tabs. html

<div class="tabs" #tabs [dir]="localeService.getLanguageDirection()"  [style.justifyContent]="activeTab === lastTab.name ? 'flex-end' : 'stretch'" >
  <div
    *ngFor="let tab of tabConfig"
    class="tabs__item"
    (click)="changeActiveTab(tab['name'])"
    [ngClass]="{
      'tabs__item_vs-icon': tab['icon'],
      'tabs__item-active': isTabActive(tab['name']),
      'tabs__item-hover': showAuthorizationButtons && !isUserLoggedIn
  }"
  >
    <span class="tabs__item-name tabs__item-name_first">
      <img *ngIf="tab['icon']" [src]="tab['icon']" alt="">
      <ng-container *ngIf="useTranslationPipe">{{ tab["title"] | translate:lang}}</ng-container>
      <ng-container *ngIf="!useTranslationPipe">{{ tab["title"]}}</ng-container>
    </span>

  </div>
</div>

tabs.s css

@import "../../../assets/scss/styles";

$border-color: #e8e8eb;
$active-color: #edcd54;

.tabs {
  display: flex;
  justify-content: stretch;
  border-radius: 33px;
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  padding-left: 40px;
  overflow-x: auto;

  @include respond-to(tablet) {
    max-width: 100%;
    flex-direction: row;
    margin: 50px 5px 0 5px;
    overflow-x: auto;
  }


  @include respond-to(phone) {
    max-width: 100%;
    flex-direction: row;
    margin: 0 5px 0 5px;
    overflow-x: auto;
  }

  &__link {
    text-transform: uppercase;
    align-items: center;
    text-decoration: none;
    display: none;

    &-login {
      text-decoration: none;
      margin-right: 20px;
      color: #1f2037;
      z-index: 5;

      &:hover {
        cursor: pointer;
        opacity: 0.7;
      }
    }

    &-register {
      text-decoration: none;
      width: 80px;
      color: #1f2037;
      z-index: 5;

      &:hover {
        cursor: pointer;
        opacity: 0.7;
      }
    }
  }

  &__item {
    display: flex;
    flex: 1 1 auto;
    border-right: 1px solid $border-color;
    padding: 23px 60px;
    border-bottom-right-radius: 33px;
    border-top-right-radius: 33px;
    cursor: pointer;
    height: 75px;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    color: rgba(31, 32, 55, .3);
    font-weight: bold;
    text-transform: uppercase;

    &-hover{
      @media screen and (min-width: $small-desktop) {
        width: 16%;
      }
      @media screen and (min-width: $laptop) {
        width: 30%;
      }
      @media screen and (max-width: $bigTablet) {
        width: 60%;
      }


      &.tabs__item-active {
        @include respond-to(phone-tablet) {
          padding-left: 20px;
          padding-right: 0;

          [dir=rtl] &  {
            padding-left: 0;
            padding-right: 50px;
          }

        }
        &:before {
          @include respond-to(phone-tablet) {
            left: -20px;
          }
        }
      }


      &:hover {
        .tabs__link {
          display: flex;
          @media screen and (max-width: $laptop) {
            animation: fronte 500ms linear forwards;
            @keyframes fronte {
              from {
                z-index: -1;
              }

              to {
                z-index: 5;
              }
            }
          }
        }
        .tabs__item-name {
          display: none;
        }
      }
    }

    @include respond-to(phone-tablet) {
      height: 50px;
      font-size: 12px;
    }

    @include respond-to(phone) {
      align-items: center;
      padding: 0 60px;
      font-size: 11px;
    }

    &-name {
      align-items: center;
      z-index: 2;
    }

    &-active {
      border-radius: 33px;
      background-color: $active-color;
      color: rgb(31, 32, 55);
      padding-left: 30px;
      padding-right: 70px;
      position: relative;
      height: 75px;
      align-items: center;


      @media screen and (max-width: $bigTablet) {
        font-size: 12px;
        height: 50px;
        align-items: center;
      }
      @include respond-to(phone) {
        height: 50px;
        align-items: center;
        font-size: 11px;
      }

      &:before {
        position: absolute;
        top: 0;
        left: -40px;
        content: "";
        width: 110px;
        height: 100%;
        background-color: $active-color;
        border-radius: 33px;
        z-index: 1;
      }
    }

    &_vs-icon {
      padding: 10px 60px;
      display: flex;
      align-items: center;
      text-transform: uppercase;
      font-size: 18px;
      font-weight: bold;

      span {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;

        img {
          margin-right: 10px;
        }
      }
    }

    &:not(&-active).tabs__item_vs-icon {
      span {
        color: rgba(0, 0, 0, 0.3);

        img {
          opacity: 0.3;
        }
      }
    }
  }

  &[dir=rtl] {
    .tabs__item {
      &_vs-icon {
        span {
          img {
            margin-right: 0;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

tabs.ts

import {
  Component, ElementRef,
  EventEmitter,
  Input,
  OnDestroy,
  OnInit,
  Output, ViewChild,
} from '@angular/core';
import { LocaleService, Translation } from 'angular-l10n';
import { UserService } from '../../services/apiService/user/user.service';

@Component({
  selector: 'app-education-tabs',
  templateUrl: './education-tabs.component.html',
  styleUrls: ['./education-tabs.component.scss'],
})
export class EducationTabsComponent extends Translation
  implements OnInit, OnDestroy {
  @Input() tabConfig: object[];
  @Input() useTranslationPipe = true;
  @Input() activeTab: string;
  @Input() showAuthorizationButtons: boolean;
  @Output() activeTabChange = new EventEmitter();
  @ViewChild('tabs') tabs: ElementRef;
  public isUserLoggedIn: boolean;
  public lastTab;

  constructor(
    public localeService: LocaleService,
    private userService: UserService
  ) {
    super();
  }

  ngOnInit(): void {
    this.lastTab = this.tabConfig[this.tabConfig.length - 1];
  }

  ngOnDestroy(): void {}

  isTabActive(tabName: string): boolean {
    return tabName === this.activeTab;
  }

  changeActiveTab(newTab: string): void {
    this.activeTabChange.emit(newTab);
  }
}