Forum Academy Marketplace Showcase Pricing Features

iOS 11 Webview Viewport leaves 20 pixel white strip at top of page

WHOA! Friends, I got it to work! I used the code snippet you guys gave me, but apparently this somehow increased my page size. After reading this comment, I went back and checked my page height, and realized there was a little bit of extra page height at the bottom. I resized it and now it looks right!! Thank you and @pork1977gm!

2 Likes

Excellent, good news!

1 Like

Code snippet worked for me also. Thanks @pork1977gm :slight_smile:

@JohnMark @pork1977gm, I’ve been able to produce a webpage at full screen using the meta name = “viewport” lines you provided :). May I ask the easiest way to implement the css you mentioned to account for content exclusion from safe areas on iPhone X? The css you mentioned is below.

/* Status bar height on iOS 10 */
padding-top: 20px;

/* Status bar height on iOS 11+ */
padding-top: constant(safe-area-inset-top);

PS. I did find the css tools plugin, but am unsure how to use the plugin to run these safe area functions in css…

For those interested, through trial and error I figured out where to place the css to account for safe areas on the iPhone X. So the end result is now a full screen background image, with the content shifted downwards so it is not covered by the iPhone X notch :slight_smile:. To do this, I went to “Settings”, “SEO/Metatags”, “Script in the body”, I entered the below css (with angle brackets enclosing the “style” and “/style” of course).

style
.main-page.bubble-element.Page {
padding-top: env(safe-area-inset-top);
}
.bubble-element.FloatingGroup.floating-group {
padding-top: env(safe-area-inset-top);
}
/style

I found the names of the div classes (.main-page.bubble-element.Page and .bubble-element.FloatingGroup.floating-group) by “previewing” my bubble web app in a browser, opening the web developer inspector tool found on most browsers, and hovering over the page elements. I hope this helps somebody one day :slight_smile:

5 Likes

Hey all - was there a final resolution on this? For context, I clicked the “remove Safari browswing” button for my app to make it feel native.

When doing that, I found the behavior where the 20px on the iPhoneX notch were transparent, and my content would scroll behind them, above the header (obviously not good UI :frowning:)

I tried 1.) shifting all content down, which made it look worse on all non iPhoneX devices because of the large header with 20px of whitespace, and 2.) inserting variations of the CSS above, but could never get the desired behavior where the header stayed the same size, the notches didn’t show any content/had the same color, and it looked OK on both iPhone X and non-iPhone X devices.

LMK, thanks!

3 Likes

I used this code as above and still no luck

Any chance we could get a foolproof solution from @bubble? quite a key issue :slight_smile:

omg! my bad :flushed:

I missed this:

But yeah, basically for anyone else who finds themselves here, the above works, thanks @pork1977gm! But you gotta pay for it :wink:

1 Like

Haha no probs, I popped a post about some issue I was having, only to realise I was changing the wrong workflow action! So I’m good too!! :slight_smile:

Gracias!

Apart from this code, what else needs to be done to make the gap disappear? I just added the code like you said in the specified place, but the gap is still there