title: Mobile FireFox has problem with fixed content at the bottom of the page
body: <p>When I open an example of fixed content at the bottom of the page like <a href="https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_ref_topnav_bottom" rel="nofollow noreferrer">this one</a>, the content sticks at the bottom of the page in my desktop perfectly:</p>
  <p><a href="https://i.stack.imgur.com/5ikF5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5ikF5.png" alt="In desktop" /></a></p>
  <p>However, when I open <a href="https://8oho5.csb.app/" rel="nofollow noreferrer">this link</a> in the FireFox in my mobile, as soon as my scroll reaches the end of the page, or if I tap the page, it will show an empty space after the fixed content, like this picture:</p>
  <p><a href="https://i.stack.imgur.com/a4b9u.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a4b9u.jpg" alt="enter image description here" /></a></p>
  <p>The css for fixed content is quite simple:</p>
  <pre class="lang-css prettyprint-override"><code>.w3-bottom {
      bottom: 0
  }
  </code></pre>
  <p>This works in FireFox desktop.</p>
  <p><strong>The question is what do I have to add to this class to work completely in mobile version of FireFox also.</strong></p>
  <p>I have made this <a href="https://8oho5.csb.app/" rel="nofollow noreferrer">sandbox</a>, check the link to see how does the footer jump up and down in Mobile FireFox and not in Chrome.</p>
  <p>I have to add this point that the scrollbar is disabled in my <code>html</code> and <code>body</code> tags:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;style&gt;
        /* Remove default margin */
        html,
        body {
          margin: 0;
          height: 100%;
          overflow: hidden;
        }
  &lt;/style&gt;
  </code></pre>