title: Mobile Menu is being stretched by Firefox and Safari
body: <p>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.</p>
  <p>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.</p>
  <p>My html:</p>
  <pre class="lang-html prettyprint-override"><code>…
  &lt;header class=&quot;headroom&quot; id=&quot;main-header-navi-headroom&quot;&gt;
      &lt;nav id=&quot;nav-main&quot; class=&quot;navbar navbar-default&quot; style=&quot; background-color: #fff;&quot;&gt;
          &lt;div class=&quot;navbar-header&quot;&gt;
              &lt;!-- a button to toggle navbar-collapse goes here --&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;collapsible-menu&quot;&gt;
              &lt;!-- all my menu points are being summoned here --&gt;
          &lt;/div&gt;
  
      &lt;/nav&gt;
  &lt;/header&gt;
  …
  </code></pre>
  <p>My template.css</p>
  <pre class="lang-css prettyprint-override"><code>.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;}
  </code></pre>
  <p>My template_responsive.css:</p>
  <pre class="lang-css prettyprint-override"><code>@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;
      }
  }
  </code></pre>
  <p>What I've tried: I tried to add a <code>max-width: 100%;</code> property to the <code>headroom</code> class, to no avail. Also, in my template there is another <code>&lt;nav&gt;</code> element that has <code>max-width</code> set to 100%, but it gets still rendered to a width of 1500 pixels.</p>
  <p>What confuses me are two things:</p>
  <ol>
  <li><p>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.</p>
  </li>
  <li><p>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.</p>
  </li>
  </ol>
  <p>Any ideas on why that problem occurs and how to fix it?</p>