通过 JavaScript 更新时固定位置 div 中的按钮消失（仅在 Firefox 移动浏览器中发生）

Question

我有一个带有固定定位 div 和一个按钮的页面（我们称之为“固定按钮”）。 页面上还有其他几个按钮（“更新按钮”），单击它们时，会通过 JavaScript 更新固定按钮的值。

在页面加载时，如果单击任何更新按钮，则固定按钮的值会毫无问题地更新。 但是，如果我向下滚动并再次单击任何更新按钮，则固定按钮有时会消失。 如果我在固定按钮消失后滚动，它将再次可见。

这似乎只发生在 Firefox 移动浏览器（版本 82.1.1）中。 它不会发生在 Chrome/Safari 移动设备中，也不会发生在我检查过的任何桌面浏览器（包括 Firefox 桌面）中。

我发现了一些解决整个固定位置元素消失的问题，但没有发现任何解决固定位置元素内消失的元素，也没有发现任何特定于 Firefox 的问题。 这些问题建议更新z-index 、 transform: translateZ(0)和overflow属性。 我试过了，似乎没有一个能解决这个问题。

有没有人有解决这个问题的方法？

下面是代码片段。 这里还有一个具有相同代码的链接。

 let num = 0; const buttons = document.getElementsByClassName('updateButtons'); for (let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function() { num++; document.getElementById('fixedButton').value = num; }); }

 input { margin: 10px; } div.fixed { position: fixed; background: #fff; width: 100%; bottom: 0; left: 0; z-index: 1; }

 <div> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"><br> <input class="updateButtons" type="button" value="click"> </div> <div class="fixed"> <hr> <input id="fixedButton" class="button" type="button" value="0"> </div>

Answer 1

我修好了它！

这是由于在 Firefox 移动应用程序中滚动时隐藏地址栏造成的。

我通过向父元素或正文中的包装器添加一些样式来防止隐藏地址栏来解决它：

 .wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }