[material-ui][Bottom Navigation] Not showing up on the bottom of the page

[daefery]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://sweet-seahorse-923fd1.netlify.app/

Steps:

1. Open the url
2. Close current tab / open new tab
3. paste the url
4. you can see the bottom nav is missed
5. touching the screen or scroll it will display the navbar

Current behavior 😯

Now the navbar doesn't show up on bottom of the page

Expected behavior 🤔

The navbar should be dispalyed when open on new tab

Context 🔦

No response

Your environment 🌎

next js 14

node 18.17

chrome mobile version 120 latest

[mnajdova]

I can't reproduce. Can you share what kind of device and browser you are using?

[ydhnwb]

Open the link that user provided using Chrome v120 on Android (it might be on other OS too).

Notice there is bottombar loaded like this below.

Open a new tab, and go to link the user prpvided without closing previous tab. It will load but NO BOTTOM BAR. It needs to be click/scroll manually to spawn the bottom bar.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[daefery]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

what is the missing information? i already provide the example link and steps how to reproduce the issue including the device and environment. do you need a video how to reproduce that?

[ydhnwb]

@daefery do you have the example repo? Might be you can make that example repo public and post it here

[daefery]

https://github.com/daefery/navbar-mui/blob/main/navbar.zip

here i attached the project including the video how to reproduce the issue on android chrome 120

[mnajdova]

@DiegoAndai can you check this? It's been open for quite some time. I don't have an Android device with me.

[DiegoAndai]

Thanks for the report @daefery!

I don't have an Android device either, but I could repro using BrowserStack:

https://github.com/mui/material-ui/assets/16889233/1ab04ea2-5dd7-49f6-b6e0-a95c1cb38f2f

Accepting as a bug. Hopefully, someone from the community with an Android device can work on it. We can discuss other options if no one takes it in some time.

[jaisaichand]

@DiegoAndai Can I work on this? I have an android and I wil try to debug and resolve it

Thanks

[DiegoAndai]

Hey @jaisaichand! Sure 😊, go ahead. Let me know if you need any help. Thanks in advance.

[yash49]

https://github.com/daefery/navbar-mui/blob/main/navbar.zip

here i attached the project including the video how to reproduce the issue on android chrome 120

@DiegoAndai @daefery @mnajdova I've android & I was able to reproduce the issue.

I believe the bug is not related to BottomNavigation because I replaced it with Box & I was still able to reproduce the issue (I've attached the recording for the reference).

Before (original code)

<Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
  <BottomNavigation>
    ...
  </BottomNavigation>
</Paper>

After (the issue is still reproducible)

<Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
    <Box> this is box </Box>
</Paper>

Chrome version: 127.0.6533.84

https://github.com/user-attachments/assets/dc0148e7-bfef-4787-9af9-fe475d9b781d