Why does Firefox displays bottom-sticky footer in a way that hides another footer unlike other browsers?

user_14781492 0
Viewed 277

First question here, I searched for this but couldn't find something useful (I'm sorry for my bad english, I'm from Brazil).

My goal is to have two footers, one on top of another, the first has social media links as tiny icons and the other one has screen buttons, but this one must follow the scroll, so it applies a sticky class. In summary, it's an Angular app that is intended to be used by smartphones. We are using SCSS for the styling of the pages and I created two components, one for each footer (social-footer and screens-footer, because some screens will have the two, and others just the latter). The social-footer component behaves correctly on Opera Mini (Mobile), Google Chrome, Microsoft Edge, Midori and Opera (PC), but not on Mozilla Firefox (screens-footer hides part of social-footer at the page end): Footers in multiple browsers

The CSS I applied to screens-footer to glue it to the bottom is:

.position-sticky {
    position: -webkit-sticky;
    position: sticky;
}

.bottom-0px {
    bottom: 0px;
}
angular sass firefox css html
1 Answers

Found the root of the problem while reproducing the error on a snippet. It was a "container" class applied to the parent tag (div) of the footer components which specified "height: 100vh;". Somehow, the result in Firefox is different than in other browsers. Here is a reproduction of the error:

function toggleContainer() {
  if(document.getElementById("container-tag").classList.contains('container'))
    document.getElementById("container-tag").classList.remove('container');
  else
    document.getElementById("container-tag").classList.add('container');
}
html,
body {
  width: 100%;
  margin: 0px;
  padding: 0px;
}

* {
  box-sizing: border-box;
}

.width-100 {
  width: 100%;
}

.padding-10px {
  padding: 10px;
}

.header {
  background-color: lime;
}

.content {
  background-color: cyan;
}

.display-flex {
  display: flex;
}

.flex-direction-column {
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.sticky-footer {
  background-color: yellow;
}

.static-footer {
  background-color: red;
  color: white;
}

.position-sticky {
  position: -webkit-sticky;
  position: sticky;
}

.bottom-0px {
  bottom: 0px;
}

.container {
  height: 100vh;
}
<html>

<head>
  <title>Footers Problem</title>
</head>

<body>
  <div id="container-tag" class="container display-flex flex-direction-column">
    <div class="header padding-10px">
      <h1>Footers Problem</h1>
    </div>
    <div class="content padding-10px flex-1">
      <u><h2>Compare another browser's result with firefox's</h2></u>
      <h3>Some content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some other content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Even More content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content
        Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some other content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Even More content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content
        Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Some other content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h3>Even More content</h3>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content
        Content Content Content Content Content Content Content Content Content Content Content Content Content Content. Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <h2>THE END</h2>
    </div>
    <div class="static-footer padding-10px">
      <h4>Static Footer</h4>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content tent Content Content Content Content Content Conte.ent Content Content Content ent Content Content Content ent Content Content
        Content ent Content Content Content ent Content Content Content ent Content Content Content </p>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content tent Content Content Content Content Content Conte.ent Content Content Content ent Content Content Content ent Content Content
        Content ent Content Content Content ent Content Content Content ent Content Content Content </p>
    </div>
    <div class="sticky-footer padding-10px position-sticky bottom-0px">
      <h4>Sticky Footer</h4>
      <p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content.</p>
      <button onclick="toggleContainer()">Toggle Container</button>
    </div>
  </div>
</body>

</html>

user_147814920
Related