Display issue with a position:fixed bottom tab bar on Firefox mobile browser

Question

I'm building a project with React and I have a weird issue with the CSS on the Firefox mobile browser. It works fine on Chrome.

before scrolling after scrolling down

As you can see, the bottom tab bar which is in position:fixed here have its content hidden behind some background. It only happens if I scroll down with my finger on a mobile device. I've tried to put z-indexes on elements of the tab-bar but this haven't solved the issue. Can you figure out what's happening here ? Thanks.

JSX of the component :

<div className="tab-menu">
  <div
    className={
      tab.pathname === "/accueil" || tab.pathname === "/" ? "tab-tile tab-selected" : "tab-tile"
    }
    onClick={() => {
      navigate("/accueil");
    }}
  >
    <AiOutlineHome className="tab-icon" />
    <p>Tableau de bord</p>
  </div>

  <div
    className={
      tab.pathname === "/chantiers" ? "tab-tile tab-selected" : "tab-tile"
    }
    onClick={() => {
      navigate("/chantiers");
    }}
  >
    <MdOutlinePlace className="tab-icon" />
    <p>Chantiers</p>
  </div>

  <div
    className={
      tab.pathname === "/commandes" ? "tab-tile tab-selected" : "tab-tile"
    }
    onClick={() => {
      navigate("/commandes");
    }}
  >
    <FaRegListAlt className="tab-icon" />
    <p>Commandes</p>
  </div>
  <div
    className={
      tab.pathname === "/parametres" ? "tab-tile tab-selected" : "tab-tile"
    }
    onClick={() => {
      navigate("/parametres");
    }}
  >
    <BsThreeDots className="tab-icon" />
    <p>Paramètres</p>
  </div>
</div>

CSS of the component :

.tab-menu{
 position:fixed;
 bottom:0;
 left:0;
 width:100%;
 display:flex;
 justify-content: space-evenly;
 background-color:var(--ternary-grey);
}

.tab-tile{
 padding:0.5em 0.5em;
 display:flex;
 align-items: center;
 justify-content: center;
 width:24%;
 flex-direction:column;
 gap:1em;
 text-align: center;
}

.tab-tile > p{
 font-size:1rem;
}


.tab-icon{
   font-size:2.2rem;
 
}

.tab-selected{
   color:var(--primary-green)
}

The component lives in several pages like this

const UserDesktop = () => {
  
  return (
      <>
          <div className="main-container">
           
          </div>
          <TabMenu />
      </>       
  );
};

export default UserDesktop;

Css of the main-container div :

.main-container {
  min-height: 87vh;
  margin-top: 70px;
  padding: 1em;
}