If you’ve seen the iPhone X design, it makes sense: The iPhone X features an irregular screen shape with an inset “cut out” at the top for the phone speaker and camera. Why on earth would Apple make this change? Super janky scrolling behaviour on iOS 11 for position fixed elements. For web, there was unfortunately no equivalent. If you had a UINavigationBar aligned to the top layout guide, iOS would also automatically extend its colour behind the status bar. There were layout guides for the top and bottom of the screen that automatically adjusted to the correct height of the status bar(s), ensuring that the app content was in a “safe area” where the status bar would not obscure it. On the native side, a lot of this was handled automatically by UINavigationBar and autolayout guides. Newer versions of iOS introduced some minor revisions, including features where an additional banner could be shown in the status bar when on a call or when an app was using geolocation in the background. For apps showing in a webview like Cordova, this often meant detecting the iOS version and adding 20px of padding to the top of your fixed header so that it would fill the space correctly. That changed with the introduction of iOS 7, which had a transparent status bar that took the colour of the app’s navigation bar. It was a piece of system UI and your app ran in the space underneath it. On the early versions of iOS, the status bar was a constant black bar across the top of the screen that was largely untouchable.

To understand the change, we need to look at the context for it.

This only affects apps that are compiled with Xcode 9 and a target of iOS 11. Note: Existing apps will continue working as they always have with no changes to their viewport behaviour. This post helps you understand the Webview Viewport in iOS 11. In particular, this change in behaviour affects any web-based apps that use fixed position header bars when they are built for iOS 11. IOS 11 brings some new, perhaps unintuitive, behaviour around the status bar area which will be particularly important for developers using tools like Apache Cordova or Ionic.

Status bar ios html example