Unable to make sticky header in Angular app on iOS

I have two sticky elements in my Angular App, one is the header and another is a DIV.

i'm using bootstrap so sticky class has the following css property:

.sticky {
    position: sticky;
    z-index: 3;
    top: 0;
}

The issue is that only the sticky div actually get's sticked while the header doesn't sticky..

My header looks like this:

<header class="section-header bg-white sticky">
  <ngb-progressbar *ngIf="isLoading" class="indeterminate" type="primary" [animated]="true" [value]="50" height=".2rem"></ngb-progressbar>
  <section class="header-main">
    <div class="container">
      
      <div class="d-flex justify-content-between">

        <a href="" appHref class="brand-wrap" routerLink="/">
          <img class="logo" src="assets/images/logo.png" />
        </a>
        <div class="float-md-right">
          <div *ngIf="cart" class="widget-header">
            <a routerLink="/cart">
              <i class="material-icons">shopping_cart</i>
              <span class="icon-text">Carrello</span>
            </a>
            <span
              *ngIf="count != 0"
              class="badge badge-pill badge-danger notify"
              ></span
            >
          </div>
          <div class="widget-header" *ngIf="account">
            <a href="#" appHref>
              <i class="material-icons">person</i>
              <span class="icon-text">Accedi</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</header>

While my sticky elements like this:

<section class="section-menu sticky">
  <nav class="nav justify-content-center">
    <a
      class="nav-link menu"
      href="#"
      appHref
      *ngFor="let men of menu; let i = index"
      (click)="clickMenu(men, i)"
      [class.active]="menuSelected === i"
      ></a
    >
  </nav>
</section>

But only the section get sticked on iphone while on google chrome all works properly...

As you could see on the following GIF the header is sticky with .section-menu which is sticked when scrolling to the header, while on iphone the header is static and the only sticky element is .section-menu

from Unable to make sticky header in Angular app on iOS