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.
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.
