I believe it’s because firefox’s UI is placed on the bottom of the screen per default. To account for that, I believe they adjust the viewport’s height to either exclude the bottom of the screen (when the symbol bar is displayed) or include it (when you scroll down and the symbol bar is hidden).
Because they use a slide-out animation based on scrolling within the web page, the viewport changes a million times in height and causes elements fixed to the bottom of the viewport to jump and adjust a lot, causing weird behavior. And nobody tests for that.
All of thse are my assumptions by the way, please test for yourself, I might well be wrong.
If it really bothers you, try placing the symbol bar above and see if it works. It’s in the settings.
My UI was actually on the top, and by changing settings it looks like it’s actually other way around. When UI is on the bottom the fixed element on page moves semi-smoothly (there is still a gap during animation), but when UI is on the top it is fucked up completely. When scrolling down the fixed element also scrolls down for a bit before appearing where it should be, and when scrolling up the reverse happens. So it looks like they didn’t account for that users actually use UI on the top and that it can affect fixed elements on the bottom of the page or it’s just bugged because they don’t test their stuff. I guess I need to send a bug report.
I believe it’s because firefox’s UI is placed on the bottom of the screen per default. To account for that, I believe they adjust the viewport’s height to either exclude the bottom of the screen (when the symbol bar is displayed) or include it (when you scroll down and the symbol bar is hidden).
Because they use a slide-out animation based on scrolling within the web page, the viewport changes a million times in height and causes elements fixed to the bottom of the viewport to jump and adjust a lot, causing weird behavior. And nobody tests for that.
All of thse are my assumptions by the way, please test for yourself, I might well be wrong.
If it really bothers you, try placing the symbol bar above and see if it works. It’s in the settings.
My UI was actually on the top, and by changing settings it looks like it’s actually other way around. When UI is on the bottom the fixed element on page moves semi-smoothly (there is still a gap during animation), but when UI is on the top it is fucked up completely. When scrolling down the fixed element also scrolls down for a bit before appearing where it should be, and when scrolling up the reverse happens. So it looks like they didn’t account for that users actually use UI on the top and that it can affect fixed elements on the bottom of the page or it’s just bugged because they don’t test their stuff. I guess I need to send a bug report.
Edit: This bug seems to be at least 3 years old: https://github.com/mozilla-mobile/fenix/issues/16264
Edit 2: There’s actually a (I think) relevant issue on bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1797964
Ah, interesting. Well, if you create a bug report, post the link here and I’ll vote it up for visibility :)