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

[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!