为什么 Firefox 显示底部粘性页脚的方式与其他浏览器不同，它隐藏了另一个页脚？

Question

这里是第一个问题，我搜索了这个但找不到有用的东西（很抱歉我的英语不好，我来自巴西）。

我的目标是有两个页脚，一个在另一个之上，第一个有社交媒体链接作为小图标，另一个有屏幕按钮，但是这个必须跟随滚动，所以它应用了粘性 class。总之，它是一款旨在供智能手机使用的 Angular 应用程序。我们使用 SCSS 来设置页面的样式，我创建了两个组件，一个用于每个页脚（social-footer 和 screens-footer，因为有些屏幕会有这两个，而其他屏幕只有后者）。 social-footer 组件在 Opera Mini (Mobile)、Google Chrome、Microsoft Edge、Midori 和 Opera (PC) 上运行正常，但在 Mozilla Firefox 上运行不正常（screens-footer 隐藏了 social-footer 的一部分在页尾）：Footers in multiple browsers

我应用于 screens-footer 以将其粘贴到底部的 CSS 是：

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

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

Answer 1

在片段上重现错误时找到了问题的根源。它是一个“容器”class，应用于指定“高度：100vh；”的页脚组件的父标记 (div)。不知何故，Firefox 中的结果与其他浏览器中的结果不同。这是错误的重现：

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>

为什么 Firefox 显示底部粘性页脚的方式与其他浏览器不同，它隐藏了另一个页脚？

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

html

css

firefox

sass

angular