iOS8 status bar behavior changed?

Hi All,

I am testing some protos on iOS8 and am seeing some funky behavior. The prototypes use the ‘black’ status bar behavior, so technically the bar should occupy the space pushing everything else below by 20 physical pixels (or 40 digital pixels).

Instead of this, I am seeing behavior similar to ‘black-translucent’ (status bar stacked on top of content), both for ‘black’ and ‘default’. Have you come across this? I wonder if Apple changed the behavior with the new OS release or if it is a simple Safari bug.

light_forger

Hi All,

I did some more testing, and it appears that the behavior described above is true for Safari on iPad only.

In the iPhone I am seeing a different variation of the problem: both ‘default’ and ‘black’ occupy the 20 physical pixels space (no ‘black-translucent’ behavior), but instead of seeing black bar (for ‘default’) and black bar with white text (for ‘black’), in both instances I see white bar with what I presume is white text.

At this point, I think it is definitely a browser bug. PS: I am running latest iOS, 8.0.2.

light_forger

Hi Svet!

Hmm, very odd–I’m not seeing the same behavior on our end. Are you able to reproduce the problem in a new file? And would you be able to post one of your prototypes here?

I did notice some odd behavior on first launch of the home screen icon, but launching it the the second time seemed to have better results. That’s not too comforting either, I know, so we’ll definitely be looking into this!

Alex

Hey Alex,

Thanks for the response. Is there a way to PM you?

light_forger

Hi Svet,

I really wish I could, but I’m afraid we’re unavailable via PM. Do you think emailing us through the support line could be more appropriate? That way we can keep any documents you send confidential (e.g. screenshots, .rp file). Thanks again.

Alex

Hey Alex,

I will email you directly.

light_forger

Now three years after I am seeing the same problem with my IOS 11.2.1 on iphone 7. The status bar is blank grey and pushed my page 20~40 pixels down. How can I fix this? I tried all three options: default, black, black-translucent. Same results. Very annoying. I am using Axure RP 8.
Raymond

Problem solved by adding the “viewtag-fit=cover” tag in the Mobile/Device Viewport Tag setting. There is no viewtag-fit field, so I had to add it to the User Scalable field (you have to use the last one). Type “no, viewport-fit=cover” in the field and you should be all set.

1 Like

Hi. everyone,

I’d built my prototype to be tested on an actual device using Axshare at some point and really didn’t care to tweak every single screen header (100+ screens across a half dozen fully-functional hi-fi prototypes). After much digging and trying plugins and a number of other methods, finding out about “no, viewport-fit=cover” and tweaking, I found this little bit of custom css did the trick:

html, body {
padding-top: constant(safe-area-inset-top) !important;
}

Thanks for the view tag info, that got me on the right track!

Marc Becquey