Mobile Menu is being stretched by Firefox and Safari

I have a mobile menu that is supposed to disappear when users scroll. I did work out all fine, but now I have a problem that boggles my mind. I am using headroom.js to make the menu disappear and reappear. For the headroom element, I have defined some css classes. The whole thing is embedded in a Joomla Template.

Now, on Firefox Mobile as well as Safari (iPhone Browser), I get this weird behavior that header classes are stretched to 1500px width, a value that is never defined anywhere in my css files. When I let Chrome do a simulation of Mobile Viewport, everything works out the way it should.

My html:

…
<header class="headroom" id="main-header-navi-headroom">
    <nav id="nav-main" class="navbar navbar-default" style=" background-color: #fff;">
        <div class="navbar-header">
            <!-- a button to toggle navbar-collapse goes here -->
        </div>

        <div class="collapse navbar-collapse" id="collapsible-menu">
            <!-- all my menu points are being summoned here -->
        </div>

    </nav>
</header>
…

My template.css

.headroom {
    position: sticky;
    top: 50px;
    left: 0;
    right: 0;
    transition: all .6s ease-in-out !important;
    z-index: 900;

}
.headroom--unpinned {top: -150px;}
.headroom--pinned {top: 50px;}

My template_responsive.css:

@media (max-width: 1179px) {
    .headroom {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        margin-top: 0;
        max-height: calc(var(--vh, 1vh) * 100);
        overflow-y: auto;
        -webkit-transition: -webkit-transform 300ms ease-out;
        transition: -webkit-transform 300ms ease-out;
        -o-transition: -o-transform 300ms ease-out;
        transition: transform 300ms ease-out;
        transition: transform 300ms ease-out, -webkit-transform 300ms ease-out, -o-transform 300ms ease-out;
        will-change: transform;
        z-index: 9998;
    }
  
  .headroom--pinned {
    top: 50px;
    position: sticky;
  }
  
  .headroom--frozen {
    top: 0 !important;
  }
  
  a.reduced-z {
    z-index: 9997 !important;
  }

    .headroom--unpinned { 
      -webkit-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
      top: 0;
    }
}

What I've tried: I tried to add a max-width: 100%; property to the headroom class, to no avail. Also, in my template there is another <nav> element that has max-width set to 100%, but it gets still rendered to a width of 1500 pixels.

What confuses me are two things:

1. There is no class or identifier in my whole css that has their width set to 1500px. I first thought that maybe that prop somehow oozed to my menu element. But since there is none, I do not understand how Firefox comes up with that width.

2. If I just scale a regular Firefox window on my Desktop Computer, everything works fine. Just the mobile preview or an actual mobile device produce the hiccups described.

Any ideas on why that problem occurs and how to fix it?