1

In the following path, when you play a music in the Firefox browser on mobile, a player will be displayed in the bottom of view-port, when you work with player some elements will be hided!

I have a such problem with a fixed element which has zero bottom! How do I can fix it?

https://www.qwant.com/music/album/lonny-montem-what-kind-of-music-do-you-play-ep/overview

2
  • I founded it happened when body has scroll and I scroll to the end of the page! Commented Apr 19, 2021 at 14:58
  • 2
    A possible way to solve this problem is perhaps not to use { bottom: 0; } and instead position the element from the top, if its height is set. For example: { height: 80px; top: calc(100vh - 80px; }. (Your solution below is a possibility, but as it prevents the address bar from collapsing can be a problem). Commented Nov 24, 2022 at 10:42

1 Answer 1

1

I fixed it!

It caused by hiding address bar when you scrolling in the Firefox mobile app.

I resolve it by preventing hiding address bar with adding some styles to the parent element or a wrapper in the body (You can disable this option in the customize section of Firefox browser to test).

 .wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.