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

I was just about to ask you to check that :slight_smile:
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

ok, thanks for that

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:

7 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:

1 Like

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:

2 Likes

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

@JohnMark @sherman @asher @soporte

I’m curious if this approach is working with the new flexbox.

I am trying to implement it in my app without success. I have added the script into the app header in settings

<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">

I have my custom css and it works for all things except the use of the env variables need to find the safe area values. I found some sites online discussing the issue generally and one offered this code to use a fallback value. Unfortunately the fallback approach doesn’t work for me.

  padding-top: env(safe-area-inset-top, 60px) !important;
  padding-right: env(safe-area-inset-right, 20px) !important;
  padding-bottom: env(safe-area-inset-bottom, 20px) !important;
  padding-left: env(safe-area-inset-left, 20px) !important;

If I instead just use the env variable it doesn’t work either, which leads me to believe I am doing something wrong with trying to set the padding to be the value of the safe area. Most likely the value of the safe area is not being found.

  padding-top: env safe-area-inset-top !important;
  padding-right: env safe-area-inset-right !important;
  padding-bottom: env safe-area-inset-bottom !important;
  padding-left: env safe-area-inset-left !important;

I have tried multiple variations to the CSS such as the below:

  padding-top: env(safe-area-inset-top) !important;
  padding-right: env(safe-area-inset-right) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  padding-left: env(safe-area-inset-left) !important;

Another variation with px coming after the safe area

  padding-top: env(safe-area-inset-top) px !important;
  padding-right: env(safe-area-inset-right) px !important;
  padding-bottom: env(safe-area-inset-bottom) px !important;
  padding-left: env(safe-area-inset-left) px !important;

Another variation with no space between the ) and px

  padding-top: env(safe-area-inset-top)px !important;
  padding-right: env(safe-area-inset-right)px !important;
  padding-bottom: env(safe-area-inset-bottom)px !important;
  padding-left: env(safe-area-inset-left)px !important;

If I however, set the values to a fixed px value it works, so that leads me to believe there is nothing wrong with my CSS, but there is something wrong with setting the padding value to the safe area value.

  padding-top: 60px !important;
  padding-right: 0px !important;
  padding-bottom: 10px !important;
  padding-left: 0px !important;

I am doing this on a paid app so my settings headers should be coming through.

Any insights into what I might be doing wrong?

@23cubed do you have any experience working with the safe area in CSS and have ideas of what might be wrong with my setup?

3 Likes

You seem to be barking up the right tree & right grammar.
https://developer.mozilla.org/en-US/docs/Web/CSS/env

Looks like the right names for the env variables
https://drafts.csswg.org/css-env/#css-environment-variable

Do you have multiple meta tags with possibly multiple viewport declarations? (could additionally be injected by Bubble for example)

https://www.angularfix.com/2021/10/how-to-fix-css-safe-area-to-work-in-ios.html

hmmmmm :thinking: :thinking: :thinking: :thinking:

1 Like

Commenting to bump this thread. Does anybody have a solution to this? I’m seeing an ugly white space above my page on iPhone when my app is added to the iPhone’s home screen (NOT within Safari). How can I make the page reach the top of the screen so that it shows behind the Dynamic Island, with no white space?

Not sure you can reach up going behind the Dynamic Island with a web app, but what I did on mine was make it black with the code below in the head section of the page.

<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" />

<!-- Address bar color -->
<meta name="theme-color" content="#000000">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="YourAppName">
<meta name="application-name" content="YourAppName">
<meta name="msapplication-TileColor" content="undefined">
2 Likes

you sir are a beauty