Mozilla Android AddressBar Conflict with Sticky Button on Bottom

Question

I have searched a lot and havent found any solution that works so here it is.

I have created a button that is after the content and have applied css for it to become sticky at the bottom of the page...

<button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button>

button.ocs-toggle-posts-toc-mobile {
  display: block;
  bottom: 10px;
  position: sticky;
  position: -webkit-sticky;
  margin: auto;
  border-radius: 4px;
  box-shadow: 0 0 3px 0 #d5d5d5;
  background: #232f3e;
  font-weight: 500;
  font-size: 18px;
  padding: 7px 12px;
}

It works everywhere in any browser i tested except mozilla android. If mozilla bottom adressbar is visible the button works okay. https://i.sstatic.net/kAoyw.jpg

BUT if mozilla’s bottom address bar is hidden, the button isnt clickable. https://i.sstatic.net/EuGlj.jpg

When the mozilla’s bottom address bar is hidden i think the viewport height changes, and maybe because the button is now where the visible adressbar was maybe it out of the "active" viewport of mozilla... that's definetely a bug i believe cause it doesnt happen in other browsers!

Nevertheless can you take a look and see if i have anything i have missed?

I would really appreciate it cause i have looked almost everywhere i believe...

test url: https://thefinterest.kinsta.cloud/p/asjalska/

Answer 1

Investigations using Firefox remote debugging

TL;DR: With high probability a bug in the Firefox mobile app

So I've linked up my phone to the computer and started a remote debugging session on the page you provided.

When inspecting the button element <button class="ocs-trigger ocs-toggle ocs-toggle-posts-toc-mobile">Περιεχόμενα</button> we can see the exact box position highlighted in the viewport: screenshot

And now it gets interesting. Apparently, the DOM box of the element gets shifted as soon as the bottom bar disappears. Or rather: The initial viewport (when the bottom bar is visible) doesn't change, because the box is still located at the same position.

So you can in fact still click/touch the button but in an area above it.

You can see this behavior in the screen recording below:

Cookie banner is repositioned as expected

Interestingly, the behavior of the cookie banner (hidden in the screen recording because already confirmed) looks as expected though. So what's the difference to the button?

Workaround and working solution: move the button above the #ocs-site element

Apparently, after quite a lot of experiments, I realized the only difference between the button (incorrect behavior) and cookie banner (correct behavior) is the fact, that the cookie banner is in a rather top level of the DOM, whereas the button is nested quite deep in the tree.

Finally, I could find a working solution that makes the button behave as expected. Here you can see the correct scrolling behavior:

The solution I've come up with is to move the .ocs-trigger button above the #ocs-site div element. This fixes the incorrect scrolling behavior when the bottom bar disappears/appears.

Also, apply some styles on the .ocs-trigger element for the correct positioning.

position: fixed;
bottom: 10px;
z-index: 11;
left: 0;
right: 0;

Here you see the final DOM in a screenshot:

Please note, that you probably have to apply additional styling changes. This solution's major aspect was to get rid of the incorrect scrolling behavior.

Follow-up: Firefox Bug? Seems to me.

As it still appears to me at this moment, I would say this is a bug in the mobile Firefox implementation. My guess is, that the viewport calculations are somehow incorrect for nested elements.

In order to get some attention on this topic, I would recommend you to share these investigations and documentation with the Mozilla team at https://github.com/mozilla-mobile/fenix/issues. Let me know if I can help you with this.