Button in fixed position div disappears when updated via JavaScript (only occurs in Firefox mobile browser)

Question

I have a page with a fixed positioned div and a single button (let's call it the "fixed button"). There are several other buttons ("update buttons") on the page that, when clicked, updates the value of the fixed button via JavaScript.

On page load, if the any of the update buttons are clicked, the value of the fixed button updates with no issue. However, if I scroll down and click any of the update buttons again, the fixed button will sometimes disappear. If I scroll after the fixed button disappears, it will become visible again.

This seems to only happen in the Firefox mobile browser (version 82.1.1). It does not happen in Chrome/Safari mobile, nor any desktop browsers I've checked (including Firefox desktop).

I've found a couple questions that addressed the entire fixed position element disappearing, but haven't found anything that addresses elements disappearing inside the fixed position element nor anything Firefox specific. These questions had suggestions to update the z-index , transform: translateZ(0) , and overflow properties. I've tried and none seem to resolve the issue.

Does anyone have a workaround for this issue?

Below is the code snippet. Here's also a link with the same code.

 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

I fixed it!

It caused by hiding address bar when you scrolling in the Firefox mobile app.

I resolve it by preventing hiding address bar with adding some styles to the parent element or a wrapper in the body:

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