Addressing the status bar gap issue on the iPhone X with Cordova for iOS 11.0

After receiving helpful feedback on my previous Cordova question regarding status bars, I've encountered a new issue with the iPhone X on iOS 11.0.

I came across this thread:

Users are reporting a white bar appearing specifically on the iPhone X running iOS 11.0, but not on other devices such as 6, 7, or 8. I've tried various solutions mentioned in the thread, including:

  1. ionic web view plugin.

  2. meta tag 

    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

  3. wkwebview engine plugin

Despite trying these solutions, I'm struggling to properly adjust the layout for the iPhone X, which is crucial for app acceptance by Apple.

I am using the latest public version of Xcode and all simulators have been updated to iOS 11.0. My UI elements are from OnSen, and I currently only have the ionic web view plugin, network info plugin, whitelist, and oneSignal plugin installed.

Any assistance would be greatly appreciated.

To better illustrate the issue:

https://i.sstatic.net/9LGbL.png

https://i.sstatic.net/HDq77.png

ioscssiphonecordova

Answer №1

Have you updated the Launch Screen File for your cordova-plugin-splashscreen yet?

As mentioned in this thread: Cordova app not displaying correctly on iPhone X (Simulator), it is important to ensure that your splashscreen size is correct for each device in order to eliminate any gaps.

I hope this information proves helpful.

Answer №2

After some investigation, I came across the solution to my problem - it turns out that the issue lies with OnSen UI rather than the web view as I initially believed.

viewport-fit=cover

This adjustment resolves the screen gap issue, and the solutions provided in this discussion thread Cordova app not displaying correctly on iPhone X (Simulator) are effective.

For those using or have used OnSen UI, it seems that the ons-page tag is causing the gap between the status bar and content. As a temporary solution for testing purposes, modifying the CSS like so:

<ons-page style="position: absolute;top: -20px;">

removes the white bar and moves the content upwards, although this may affect other devices differently. It's a starting point for me at least.

So for those savvy with CSS, there may be a more proper way to resolve this issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Triggering a specific outcome with every user interaction involving the selection of an element

How can I trigger this effect each time the user clicks on the element using jQuery? I have added a "ripple" class upon clicking, but when I click on the element for the second time, the effect does not execute because the class has already been added. Ho ...

jqueryhtmlcss

What is the limit of CSS includes that IE can process?

While working on theming Drupal, I encountered an unusual issue. After enabling a few modules that added 5 to 10 link tags to the page, I noticed a strange behavior in different browsers. Firefox successfully added the new stylesheets to the cascade, but i ...

cssinternet-explorerbrowser

Animate the coloring process with dynamic motion

Is there a way to dynamically fill a canvas with color and apply animation? I have successfully created a canvas cylinder that fills with color, but I'm hoping for a slow animation effect when the color is filled. I've tried searching on Google ...

jquerycsshtmlcanvashtml5-canvas

Element with negative z-index overlapping background of parent element

I am currently working on creating a CSS3 animated menu, but I am facing an issue where elements with low z-index values are displaying on top of their containing elements. This is causing the "sliding out" effect to be ruined. Here is the HTML: <html ...

htmlcss

Obtaining information using the npm info command usually requires around 70 seconds

As I work on my Java application, I have encountered a situation where I need to retrieve information from the cordova version installed on the system. Currently, I am able to do this by parsing the output of cordova -v, which is working well. However, I a ...

cordovacmdnpm

div with fixed position and scrollable content

I'm exploring ways to create a simple webpage layout inspired by the traditional index setup. The idea is to have a fixed header/navbar div that is 200px in height, with a second div below it containing scrollable content that fills the remaining vert ...

htmlcssscrollable

Styling Angular2 Material Dialog: the perfect fit

The Angular2 material team recently unveiled the MDDialog module at https://github.com/angular/material2/blob/master/src/lib/dialog/README.md I am interested in customizing the appearance of Angular2 material's dialog. Specifically, I want to adjust ...

cssangularangular-materialangular-material2

What is the best way to create an Angular image slider that smoothly transitions between slides without any intermediate steps?

In my Angular application, I've successfully implemented an image slider. However, I am looking to tweak its behavior specifically when navigating between non-adjacent slides using the circular navigation buttons located below the slider. Currently, ...

htmlcssangularcarouselimage-slider

Contrast between the visibility settings of display none and display block

Can you explain the contrast between a control's style being set to display: none versus display: block? ...

htmlcssstyling

What is preventing Firefox and IE from displaying images fully in a list item?

I am trying to create a slideshow with two separate sliders using li elements for that purpose. It works perfectly in Chrome and Safari, but I am encountering issues in Firefox and IE. In Firefox, the slideshow works fine in quirks mode but not in standar ...

cssinternet-explorerfirefoxhtml-listsquirks-mode

The background image is not displaying properly within a <span> tag

I am attempting to show a smiley icon within a span tag that is nested inside a list item. Below is the code snippet: <p> It contains various tabs:{" "} <li> Home - Showcase and brief informati ...

htmlcssreactjsstyles

Padding in submit button value is essential for ensuring proper spacing and

Is there a way to adjust the padding of a submit button value? I have tried using text-align: right;, which works fine for aligning the text to the right. However, when I attempt to use padding-left: 25px;, the text remains centered instead of moving to t ...

css

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

htmlcssbackground-color

Stop div from exceeding the page boundaries

Here's my current dilemma: I have a simple css3 tooltip-menu that is hidden by default and appears on mouseover. It has a fixed width and is positioned absolutely to the right (with an arrow in the middle pointing to the hovered element). The issue I ...

jquerycsstooltip

Displaying the value of a jquery variable in an HTML document

I'm tackling a problem differently today compared to yesterday, but my knowledge of jQuery and JavaScript is quite basic. My goal is to increment the transform value of a div every 5 seconds: <div style="transform: translateX(0px);" id="slide_ima ...

javascriptjqueryhtmlcss

The issue with ng-bind-html causing the disappearance of paragraph spaces

Is there a way to preserve paragraph breaks when using ng-bind-html to display text on the screen? I am having an issue where all the text appears as one big chunk if there are paragraph breaks in the data pulled from the database. Not sure what is causing ...

cssangularjs

The Bootstrap div is struggling to maintain its width on smaller screens

My attempt to create 3 inputs with the following code: <div class="col-sm-5 col-md-6"> <form> <div class="form-row"> <div class="col-0.5 search-label"> <label class="control-label">Search :</lab ...

cssbootstrap-4

What could be causing the whitespace around this element when using SASS from Refills / Bourbon.io?

I've recently started using the impressive SASS framework, Boubon.io created by the talented team at thoughtbot. As I experiment with their supplied templates (known as Refills), I'm finding that Bourbon.io serves as a versatile alternative to po ...

htmlcsssass

Tips for effectively documenting CSS on a extensive website

Our website is quite extensive, with numerous pages. As we've added more pages, the amount of HTML and CSS has also increased. We're wondering if there's an efficient way to document all of this information. For example, how can we easily de ...

htmlcss

various image proportions in HTML

I have an image with a ratio of 16:9 that I want to use on my website. On one of the pages, I display a list of products with images having a ratio of 340x265. When a user clicks on an item in the list, it takes them to the product page where the same im ...

htmlcsswebresponsive-designmedia-queries