iOS 8 home screen web apps with status bar overlay and footer bar integration

After installing a web application to 'home' and working with it, I noticed that a recent update to iOS has made the usual black status bar transparent and float above the web content below.

In addition, there is an unseen horizontal bar at the footer of the app that pushes my fixed footer up by about 20px.

Although most clients may choose the more cost-effective Android option, my associates often use their own iPads to demonstrate the application. What are my options here? Will I need to adjust the application specifically for this device/version through 'sniffing'? If so, what is the best approach to do this without adding extra libraries? Currently, I am using the latest Angular framework + .NET 4.5.1.

Thank you.

cssangularjssafariios8statusbar

Answer №1

After receiving a significant amount of interest in this inquiry, I have managed to discover a solution to the issues at hand.

Within the application's root, I implemented a test for modern iOS 8 devices.

var userAgent = navigator.userAgent;
$rootScope.isIOS = ( userAgent.match(/(iPad|iPhone|iPod)/g) && userAgent.match(/(OS 8_0_)/g) ? true : false );

In the main wrapper preceding the navigation element, I tactfully inserted a conditional block.

<div ng-if="isIOS" class="isIOS">&nbsp;</div>

Next, I defined the sass class as follows:

.isIOS {
    position: fixed;
    z-index: 10000;
    top:0;
    width: 100%;
    height: 23px;
    background: $fooColor;

    & + div {
        margin-top: 25px;
    }
}

This adjustment addressed the issue with the top part of the screen, ensuring that the status bar remained fixed while navigating through different pages.

To resolve the blank space at the bottom, I included the following meta-data in the base layout:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

All is well now. If you stumbled upon this information and benefited from it, that's fantastic. If not, it doesn't make much difference in the grand scheme of things, does it?

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

"Switching out elements and tallying up values in an array

I am working with an array of identifiers for items var names = ['1','2', '1', '3']; Using these ids, I send an ajax request to retrieve the name associated with each id and replace it accordingly; var names = [ ...

javascriptangularjs

Tooltip not appearing when user hovers over it

I need help with displaying tooltips only when hovering over anchor tags. Initially, I have hidden the visibility and want to show it on hover. However, the tooltips are not appearing when I hover over them and there are no console errors displayed. Can so ...

htmlcsstooltip

Using Paper.js to access and manipulate document.body.style.opacity within a paperscript

My website is essentially one large canvas image. Currently, the body fades in when loaded using this code: <body onLoad="document.body.style.opacity='1'"> However, I want to initiate this fade within my paperscript because sometimes the ...

javascriptcsshtmlpaperjs

Using createStyles in TypeScript to align content with justifyContent

Within my toolbar, I have two icons positioned on the left end. At the moment, I am applying this specific styling approach: const useStyles = makeStyles((theme: Theme) => createStyles({ root: { display: 'flex', }, appBar: ...

javascriptcssreactjstypescriptmaterial-ui

Angular-Formly facing problems with promise handling in UI Bootstrap's typeahead

I am currently using angular-formly in conjunction with integrated ui bootstrap typeahead to make a query to an api through a service. The promises were successfully resolved, however the typeahead list only displays data from the most recent input query. ...

angularjsangular-ui-bootstrapangular-formly

Optimizing Bootstrap popover responsiveness for elements with excessive length to ensure a smooth display experience

I am currently working on creating a popover that remains in position when hovered over, specifically for elements that are too large to fit on the screen. However, I am facing some issues with my current implementation: <template> <div class ...

jqueryhtmlcsstwitter-bootstrap

Sending data from an Ionic application to a server

I came across this solution on a forum, but it lacks detailed explanation for me to customize it according to my requirements. The author also mentions a stack overflow question, which led to various "different" solutions leaving me feeling confused. Belo ...

javascriptangularjsionic-framework

Creating head tags that are less bouncy

After running my code, I noticed that the headlines didn't transition smoothly - they seemed to jump rather than flow seamlessly. To address this issue, I attempted to incorporate fadeIn and fadeOut functions which did improve the smoothness slightly. ...

javascriptjquerycss

I'm getting a JS error saying that the variable "var" is not defined. Does anyone know how I can

Here is the code I am using to dynamically create a sitemap.xml file when accessing /sitemap.xml database = firebase.database(); var ref = database.ref('urls'); ref.on('value', gotData, errData); function errData(err){ ...

javascriptangularjsarraysnode.jsexpress

Tips for making a scrollable container that allows its contents to overflow without clipping?

Currently working on implementing a horizontal card row for my website with a unique hover effect - the cards lightly rotate and raise on hover. Here is a preview: https://i.sstatic.net/eDQ59.gif To make this row responsive, I added overflow-x: auto; to e ...

htmlcss

Creating a dynamic and flexible div using CSS

I am currently working on a small webpage and encountering an issue with responsiveness when scaling the browser window in and out. The design looks perfect at 320x568 resolution, but when I scale it down, a black box (`.transbox`) overlaps the image, whic ...

htmlcssbootstrap-4

Customizing the formatting of Angular's ui-select2 NoMatches message within a directive

I have a multiple select in a directive template and I want to customize the message that appears when no matches are found. The documentation on suggests overriding the formatNoMatches method for this purpose. This is the select element in my directive& ...

javascriptangularjsangular-uiui-select2

The process of making an image fill an entire div using Html and CSS

What is the best way to make an image fill an entire div using Html and CSS? ...

htmlcssmobile-website

What is the best way to hide the div when scrolling to the top?

Is there a way to hide the circle once it's scrolled to the top? Currently, I can scroll the circle to the top but it remains visible. Upon further exploration, I found that clicking on the circle scrolls it to the top and then on a second click, it f ...

javascriptcss

Establishing the first display in AngularJS with the Ionic Framework

Is there a better way to set the initial screen in my Ionic framework application based on whether or not the user is logged in? In the angular.module.config section, I currently use this approach: if (window.localStorage.getItem("userKey") != null) $ ...

javascriptangularjsionic-framework

Leverage the power of AngularJS to fetch a nested resource within your Rails

After following the Railscast, I have been integrating AngularJS into my Rails application. My query is similar to this post on Stack Overflow: Angular JS ngResource with nested resources. Unfortunately, I have yet to find a solution to my specific issue. ...

ruby-on-railsangularjs

Using DIV to "enclose" all the elements inside

I need assistance with my HTML code. Here is what I have: <div id="cover" on-tap="_overlayTapped" class$="{{status}}"> <form method="POST" action="/some/action"> <input required id="name" name="name" label="Your name"></input> ...

javascripthtmlcssajax

Menu stack with content displayed to the right on larger screens

Given the content div's position (up middle), what method can I use to stack the divs in this manner? Is it possible to accomplish with only CSS or is jQuery necessary to move the div content out on larger screens? ...

htmlcsstwitter-bootstrap

How can you add a border before and after text as well as around the entire box

Is there a way to add borders to the image below? I would like to include a border that looks similar to this: text added before and after the entire box How can I achieve a border using css either with before, after, or background? ...

htmlcssborder

Is it possible to use React and Material-UI to make a paper element extend to full width beyond the boundaries of a Container?

Assuming I have the following code snippet: <Container maxWidth='lg'> <Grid container spacing={3}> <Grid item xs={12} md={6} > <Image src="/img/undraw_programming_2svr.png" color='transparent' ...

cssreactjsmaterial-ui