Fixed Bottom Audio Player Hides Behind Mobile Browser UI & Moves When Scrolling
Problem
I have an audio player (position: fixed; bottom: 0) that behaves incorrectly on mobile browsers:
Hides behind the browser’s UI (address bar, bottom navigation) when scrolling.
Moves down unexpectedly when the browser UI hides/shows during scrolling.
What I’ve Tried
bottom: 0;
bottom: env(safe-area-inset-bottom); → No effect (even after adding viewport-fit=cover).
Expected Behavior
The audio player should:
Stay fixed at the bottom above browser UI (like Safari’s bottom bar).
Not move/jump when scrolling.
How can I make the audio player truly fixed at the bottom without being obscured by browser UI or moving during scroll?
Here is the page where this problem is happening: https://pmpodev.hauptman.net/avdio-vodnik/razstava-slikarski-mojstri-od-16-do-18-stoletja-soba-5/
Any help MUCH MUCH appreciated, I really can't figure this out.
8 Replies
I have just tested this on my iPhone and the audio player remains visible when scrolling etc. It doesn't move or get hidden by anything.
This is how it looks like on chrome android
Not sure why the UI is over it for some reason or how to bypass this problem. Only thing I found so far is bottom: env(safe-area-inset-bottom); but it doesn't work for some reason.
might seem silly but can you try defining style="position: fixed;" as an inline style on the player?
Also, try adding min-height: 100svh on the body.
box-sizing: inherit <-- this is not rightI tried inline and 100svh and didn't work :/
I tried without that and it screwed sizing a bit (doesn't matter, I can fix that), but same problem is there where the fixed element is under the chrome browser UI on mobile. Can you explain a bit more? Maybe I don't understand.
it screwed up the sizes because you've been doing everything with a different box sixing option