Post by jontara on Oct 21, 2017 20:32:24 GMT
With iOS11, there was a change made to status bar behavior for webviews.
If you use iphone_use_new_ios7_status_bar_style: 1 in build.yml, (or maybe regardless?) and you build using XCode 9 for iOS11 target, you will find that now your pages are pushed down 20px. As well, you will have issues with fixed headers (I use Bootstrap 4 fixed headers) which will show 20px too low.
Apps built with eg. XCode8 for iOS10 still work as expected, since as typical with Apple, iOS adapts to the previously-expected behavior.
Fortunately, there is an easy fix. You can include: viewport-fit=cover in your <meta> tag. This restores the previous behavior.
To accommodate iPhone X, you will need to do a bit more, but fortunately, the tools are there to deal with it (new CSS constants).
There's a good article on CSS-Tricks:
css-tricks.com/the-notch-and-css/
Actually, I first discovered it on this blog, which also has an excellent explanation:
ayogo.com/blog/ios11-viewport/
I use this with WkWebView, but I understand that this is also available in UIWebView.
-----
If this affects you, you probably are scrolling your content behind any fixed header and the status bar and blurring the background.
Prior to iOS9, this was difficult, and imperfect. You had to blur a copy of the background placed behind the header bar. But there is some new CSS designed just for this. You can use e.g.:
backdrop-filter: blur(10px)
It will blur whatever is BEHIND the elements it is applied to.
You also need to reduce opacity of your header bar (or whatever) or it's background. (Just background is best).
There are additional options for this attribute:
developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
If you use iphone_use_new_ios7_status_bar_style: 1 in build.yml, (or maybe regardless?) and you build using XCode 9 for iOS11 target, you will find that now your pages are pushed down 20px. As well, you will have issues with fixed headers (I use Bootstrap 4 fixed headers) which will show 20px too low.
Apps built with eg. XCode8 for iOS10 still work as expected, since as typical with Apple, iOS adapts to the previously-expected behavior.
Fortunately, there is an easy fix. You can include: viewport-fit=cover in your <meta> tag. This restores the previous behavior.
To accommodate iPhone X, you will need to do a bit more, but fortunately, the tools are there to deal with it (new CSS constants).
There's a good article on CSS-Tricks:
css-tricks.com/the-notch-and-css/
Actually, I first discovered it on this blog, which also has an excellent explanation:
ayogo.com/blog/ios11-viewport/
I use this with WkWebView, but I understand that this is also available in UIWebView.
-----
If this affects you, you probably are scrolling your content behind any fixed header and the status bar and blurring the background.
Prior to iOS9, this was difficult, and imperfect. You had to blur a copy of the background placed behind the header bar. But there is some new CSS designed just for this. You can use e.g.:
backdrop-filter: blur(10px)
It will blur whatever is BEHIND the elements it is applied to.
You also need to reduce opacity of your header bar (or whatever) or it's background. (Just background is best).
There are additional options for this attribute:
developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter