Mobile App Wireframe – Pin to Browser on app header being ignored when keyboard appears

Hi all,

I’m working on an iOS Mobile App wireframe/prototype but I’m struggling to get the app header to stay pinned to the top of the browser when the keyboard appears during interaction with a form.

As soon as I tap into a field, and the keyboard appears, the whole page is moved upwards.

Steps to reproduce:
[ol]
[li]Visit: http://1vrlup.axshare.com/#c=2[/li][li]In Safari Browser, on iPhone 5, tap bookmark icon and “Add to Home Screen”[/li][li]From home screen, access wireframe via newly added App Icon[/li][li]Scroll content and see that the “Pin to Browser” on the app header works fine[/li][li]Tap into a form field and see that the app header has been pushed up and off-screen.[/li][/ol]

Any idea how to get around this, or what I’m doing wrong? I’ve tried searching through the forum but can’t find any solutions. I’m using Axure RP 7.0.

Thanks,
Tabitha

Hi Tabitha,

Hmm, this issue looks like it’s caused by a potential iOS bug. I’m seeing this behavior in both 7.0 and 8.0 when testing with an iPhone 5 (iOS 8.2) on our end, so I’m going to go ahead and file this as a bug so that we can investigate and see what can be done from our end.

Thank you so much Alyssa! Much appreciated :slight_smile:

Just confirming that there’s nothing that can be done in the interim to work around this? We have a usability testing session this Friday that may be affected by this. We’ve had a few internal rounds with people asking about the “app header disappearing”.

Hey Tabitha,

Sorry for the delay, I’ve been out of the forums for a few days! I did some tinkering around on my end and experimented with moving the pinned header when the keyboard shows and trying to turn of scrolling and user scalability, but it doesn’t look like those methods helped (at least not in my test) as the iOS keyboard seems to push everything anyway. A quick search online seems to show that other people who aren’t using Axure RP are also experiencing similar issues with iOS keyboards pulling and pushing things that should be fixed, and this issue seems to have been going on for a while.

I haven’t found a good workaround for this yet (if anyone has found one, feel free to chime in!) but hopefully we’re able to find something to combat this issue from our end!

Was a solution to this problem ever identified? Particularly how to keep the app header pinned to the top when the screen needs to scroll to show the text field that has focus.

Hi gregg,

It doesn’t look like the issue was resolved on iOS. After testing the OP’s file though, their prototype seems to work OK on the latest iOS version 11–albeit the prototype appears to use Move actions in lieu of Pin to Browser. I’m going to log this with our QA team and update the report.