nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

On mobile, going from a scrolling page to a static page results in blank area at bottom of static page

NicoleJohnson

I'm using ArcGIS Online and viewing my experience on a Pixel 8a (Android) phone using Chrome. I'm curious if other people have experienced this.

My experience has an intro page that scrolls. The next page is a static page. Unfortunately, going between the two types of pages causes this blank area to appear at the bottom of the static page:

I can "pull" the page down and it looks as intended, and I get my address bar back:

Even if I don't pull the page down, everything still works as intended, it just doesn't look very professional.

I'm not a web developer (no one on my team is), but I mentioned this issue to someone who used to work in that space, and they mentioned something about the software not accounting for a viewport change (?), and that it was possible this might only happen in Android. To be clear, they have not dug into why this happens--this was just their best guess. I also tried various queries searching for bugs.

I'm waiting on feedback from my coworkers who have iPhones, but has anyone run into this or willing to try it out for themselves? (Unfortunately, I can't share my experience.)

Finde mehr Beiträge mit dem Tag

ArcGIS Online

Accepted answers

ZhenZhang22

Hi Nicole,
Thanks for checking back. I totally get wanting to have a clear answer in case someone brings it up.

This behavior really comes down to how different mobile browsers handle their address or navigation bars when you scroll. Some browsers, such as those on Android devices, hide the address bar as you scroll up, which temporarily changes the visible height of the page. If a full-screen page loads while that bar is hidden, it can leave extra space at the bottom until the bar comes back.

To avoid this, it helps to use a browser that doesn’t hide the navigation bar on scroll, or (if possible) adjust browser settings to keep the navigation bar fixed in place.

Thanks,
Zhen

All comments

ZhenZhang22

Hi Nicole,

Thanks for sharing the details. I tried setting up a scrolling page and a static page like you described, and switched between them, but I wasn’t able to reproduce the issue on my devices (both Android and iPhone).

If possible, it would be really helpful if you could share a sample app (shareable) or setup where the issue happens—that would make it easier for us to look into the cause.

Thanks!

Zhen

NicoleJohnson

Sorry, just saw this! I would love to share the app via a group. Is "zhenzhang" the right AGOL username?

I have since tried the app on a Pixel 5a and a Galaxy S23+, and both show the issue. Everything looks exactly as intended though on my coworkers' iPhones.

ZhenZhang22

Hi Nicole,

You can share the app with me in a group, my username is zhe14140.

Thanks

Zhen

NicoleJohnson

Thank you! Just shared the group: MDHHS - Esri Troubleshooting.

ZhenZhang22

Hi Nicole,

Thanks for your sharing. This seems to happen because when you scroll up, the browser hides the address bar and toolbar. If you switch to a full-screen page while they’re hidden, the space they usually take up stays empty at the bottom. Once you scroll down and the address bar shows again, the page layout goes back to normal.

On iPhones, the address bar doesn’t hide the same way, so the issue doesn’t appear. So the extra space at the bottom is related to how mobile browsers handle the address bar during scrolling.

Thanks,

Zhen

NicoleJohnson

Thank you so much for looking into this.

To make sure I'm understanding correctly, is there no configuration (short of choosing scrolling OR static pages for the entire app, but not a mix) that would prevent this from happening? You had previously mentioned trying to reproduce this issue on an Android device, but on that device it wasn't reproducible. Does that mean this behavior will vary between Android devices?

It's definitely not a deal-breaker, just want to make sure I have a good handle on when/why it happens in case anyone asks. Again, thanks!

NicoleJohnson

@ZhenZhang22, any response? I know this is an old thread, but I'm a little worried I'll be asked about this and just have to shrug.

ZhenZhang22

Hi Nicole,
Thanks for checking back. I totally get wanting to have a clear answer in case someone brings it up.

To avoid this, it helps to use a browser that doesn’t hide the navigation bar on scroll, or (if possible) adjust browser settings to keep the navigation bar fixed in place.

Thanks,
Zhen

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.