Closed Bug 1760924 Opened 2 years ago Closed 2 years ago

"position: fixed;bottom:0" not working on mobile when site content is a bit longer than mobile height

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Version:
Firefox 99
Type:
defect

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1712280

People

(Reporter: elijahllopezz, Unassigned)

Details

Steps to reproduce:

Firefox mobile. I'm posting this bug here because of the following
https://github.com/mozilla-mobile/fenix/issues/13797#issuecomment-1070515386.

Here are two of my websites https://elijahlopez.ca/social and https://lenerva.com/store that I just added bottom mobile navigation to. Am I doing something wrong with my CSS? The menu bar is at the bottom if the content requires more than the address bar of scrolling or no scrolling, but not if the content is slightly longer than the view height.

This is a custom CSS only mobile navigation, source code below.

CSS
HTML

Actual results:

Demo of bug
The navigation menu jumps up when I reach the bottom of the social or store page. Instead of sticking to the bottom.

There's also the bug of the white line at the top of my screen. Not sure what's causing it when I scroll on some pages on my personal website.

Both these issues are niche and aren't reproducible in devtools.

Expected results:

The navigation menu should stick to the bottom.

Looking at your "Demo of bug" video, I see the "MENU" bar awkwardly floating some distance away from the bottom of the screen, after the browser's dynamic toolbar disappears (e.g. at time 13s in the video, and other times as well).

Is that the main issue you're reporting, or is there additional/distinct brokenness?

If so: I think this is the same as bug 1712280. (Incidentally, I can't reproduce this on my Pixel 4a; "MENU" stays snapped to the bottom of the screen for me, when I scroll your site such that the dynamic toolbar disappears. But I also can't reproduce bug 1712280 on this phone, so I think there's some additional factor that I'm missing that makes this issue reproducible.)

Status: UNCONFIRMED → RESOLVED
Closed: 2 years ago
Resolution: --- → DUPLICATE
Summary: position: bottom not working on mobile when site content is a bit longer than mobile height → "position: fixed;bottom:0" not working on mobile when site content is a bit longer than mobile height

It does look like duplicate. I'm on Oneplus6T which probably matter. I'm actually relieved that it works as intended for others.

You need to log in before you can comment on or make changes to this bug.