Hello,
As the title says, I’m now getting a white strip at the top of pages in iOS 11.
This link explains the problem (and solution) in much greater detail than I can.
I just need help with the implementation. 
Thanks,
Nathan
1 Like
Yeah well said i totally agree with you
I tried in the html header without success.
To make that adjust automatically for iPhone X and other iOS 11 devices, you would add a viewport-fit=cover option to your viewport meta tag, and change the CSS to reference the constant:
header {
/* … */
/* Status bar height on iOS 10 */
padding-top: 20px;
/* Status bar height on iOS 11+ */
padding-top: constant(safe-area-inset-top);
}
I’m surprised more people are not jumping on this. The white bar up on top of iOS11 devices
looks hideous. How would we go about fixing this?
2 Likes
I think you can do this with one change only.
Go into your Settings > Advanced Settings > Script/meta tags in header
Now paste the following into the area shown in the image below…
meta name=“viewport” content=“viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”
(Don’t forget the < and > at the start and end! - I couldn’t paste those in)
4 Likes
Not working on iPhone 6 and iOS 11. Can you tell me which device and ios you’re using?
I just had it working on my iPhone 6S with the latest IOS 11 available
I’ll check what other settings I have applied soon
1 Like
Ah man. I really wanted this to work so badly. I’m running my app on an iPhone X, latest iOS, and an iPad Pro, latest iOS… and i’m still getting the space at the top. It looks even worse on the iPhone X because of the top notch.
I still very much appreciate your contributions, though, @pork1977gm
Hi @emasl, I can understand the frustration, I too wanted it to work, it was very annoying and to be honest I don’t understand it fully but I know it can be fixed. I played around with different code in the Page HTML Header section to start with but that seemed to not do much so then after reading what @JohnMark originally mentioned (a few times) I ended up here: https://forum.ionicframework.com/t/viewport-fit-cover-adding-20px-more-to-scroll-content-white-space/106735
When I added that snippet into the “Script/meta tags in header” section, all of a sudden the 20px space at the top of my page just went away. So I have 1 index page as I’m creating a native app, everything else comprises of being made with groups. I have a floating group which appears sometimes at the top of the page (position top) and I had to have a normal group inside that floating group to make it shift up correctly. The group had to be same dimensions as the floating group.
I was looking to see what else I did, and I think that’s it. I have the shortcut icon on my iPhone Home screen making it run as a native app. I read for iPhone X, the viewport is slightly different because of the screen layout near the top, unfortunately I can’t test that… lucky you to have one though!.. nice phone 
The other thing I make sure of for my needs, is that page index, floating groups, groups etc near the top of my page are all set to have “none” for their background colour and not white, making everything transparent and as soon as I scroll up 20px, they fade out with animation (fade in/out), but this suits my needs perfectly. The content in the status bar is still visible like battery life, signal etc but it’s white and my pages overlay it.
4 Likes
So I’ve been playing with the viewport-fit function in the head also, and have been able to “patch” the white status bar issue, but I’ve noticed that it actually has shifted the entire app up 20px (on iPhone 8), leaving a white bar at the bottom (I have a bottom floating element that’s causing issues there.)
Have you noticed this also?
It seems to me that the major issue might be Bubble’s use of black-translucent in their meta tag generation. Looks as if that option is/was set for deprecation.
1 Like
That’s interesting, it shifted it up by 20px for me too but I did not have any issues with a white bar at the bottom. I too have a floating group running across the bottom of the page (set to bottom) which contains some icons.
1 Like
1 Like
Yeah, I was able to mitigate that effect by adding a 20px high group to my top floating group with a dark background, but all it did for me was shift white space from top to bottom
So does it behave in the same way as shown, through Safari on the phone… and also when running as a native app? when you save the shortcut to your home screen. I’ve only tested my own up to iPhone 6 (not 8) so wondered how it would look on yours (or vice versa)
1 Like
I don’t notice anything out of whack on my 8 in either one, other than the white on white at the top. You’re bottom float seems to work just fine for me also. Must be something off with mine, lol.
Edit: seems my issue with the bottom white space was just a symptom of the main page being too short… once I expanded the main page beyond the screen height, the bottom float attached to the bottom of the screen just fine.
I was just about to ask you to check that
Glad it works now!
@asher what did you put into the Script/meta tags in header section to make it appear alright for you?
Was it the same as what I mentioned before? I know @JohnMark couldn’t quite get it to work so wondered if you had something different added? It may help him and @emasl possibly.
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Yeah the same as you. I did notice that if you don’t add at least the width=device-width than you’d end up throwing off bubble’s generated viewport tags.
1 Like