iOS 11's Mobile Safari presents a challenge for web apps with the nav bar overlapping the top portion of the screen, cutting off content that relies on

When using 100vh on Mobile Safari, it fails to account for the height of the lower navigation bar.

For example, look at the screenshot below. To show my app-like footer, I have to manually subtract 74px from the container's height in a somewhat messy way (see code below). If I don't do this, my footer gets hidden under the mobile Safari navigation bar.

Is there a neat and common solution to handle this issue?

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

To address this problem, I use the following code. However, I find it not very elegant. It relies on hard-coded offsets based on the user-agent platform/browser combination to work around native behavior. I'm not entirely comfortable relying on this solution:

edit by the way, this code runs in the ngAfterViewInit() method of my Angular4 "responsive, mobile first and progressive web app"

const wrapper:any = document.getElementsByClassName('hack-to-fix-ios-height')[0];
if(wrapper && this.iOS()){
  let height = wrapper.offsetHeight;
  height -= 74;

  // Mobile Safari fix for footer nav
  this.renderer.setStyle(wrapper, 'height', height + 'px');
}

Answer №1

One solution would be to assign window.innerHeight to wrapper.style.height. This should provide the height excluding the navbar, as long as it is visible. However, if the user scrolls down and hides the navbar, the window.innerHeight value will adjust to accommodate for the missing navbar height.

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

Centering Text and Image in React Horizontally

I'm attempting to achieve a layout similar to the one shown in the image below. Currently, my image is positioned at the top with the text below it. I would like to arrange it so that the text appears on the right side of the image. Please take a loo ...

What is the reason behind the failure of the jquery.hide() function on this particular UL element?

Although the submenu displays correctly, it refuses to hide when using the mouseleave function. Oddly enough, a console.log() confirms that an event does trigger at the right moment when the mouse exits the <ul>, yet the submenu remains visible for ...

What is the reason for the overflow occurring in a container of identical size due to this particular element?

I've encountered an issue while trying to create a div with a scrollbar that only appears when the elements within it don't fit the default area. <div style="overflow-y: auto; height: 36px;"> <img src="." width="36" height="36" /> ...

Adjusting Dropdown Direction Based on Section Location – A Step-by-Step Guide

Question: Is there a way to adjust the bootstrap dropdown so that it can appear either above or below depending on where the section is positioned? Check out my code here Here is the CSS I am using: #cover-inspiration{ width: 100%; height: 100vh ...

The text displayed on the image is experiencing fluctuations

I am experiencing an issue on my website where the post text fluctuates rapidly when the mouse hovers over the image. I have a site where I display the post text on mouseover of the image. Can someone please help me solve this problem? You can test it by ...

Creating a unique-looking visual representation of progress with arcs

Looking to create a circular progress bar (see image below), with loading starting from the left bottom side up to the right bottom side. The empty state should be light-blue (#E8F6FD) and the progress color strong blue (#1CADEB). I've experimented w ...

The Zurb Foundation has a multitude of redundant CSS entries

I have been utilizing Zurb Foundation for a while now, with a bower + compass setup as outlined in the documentation here. Recently, I encountered an issue where a specific page was loading slowly. Upon investigating, I discovered that there were numerous ...

Adjust the size using padding alone

My CSS specifies font size of 14px, line height of 14px, and padding of 7px on the top and bottom. The total should be 28px. When I apply these styles in a div, it results in a height of 28px. However, when applied to a ul li a element, the height becomes ...

What could be causing my CSS transitions to fail when using jQuery to add classes?

I'm currently working on a website and I'm facing an issue with the transition not functioning as expected. The problem persists even when the 7.css stylesheet is removed and interestingly, the transition works fine when using window:hover. My a ...

Dealing with h2 text overflowing within a bordered container

I need help creating an h2 element with a double border. Here is my current HTML+CSS snippet: h2.titulo { width: 100%; margin: 10px 0; padding: 10px 0; text-transform: uppercase; font-weight: 400; font-size: 30px; display: block; color: ...

The content within the div appears to be in a perpetual state

I'm working on creating a chat application with a single interface. I've encountered an issue where the content in the middle div "messages" keeps bouncing, including the scroll bar. How can I resolve this problem? Additionally, I'm unable ...

Does width change based on position?

When I set position:absolute for an element, its width remains constant regardless of the text inside. However, if I set position:relative for the same element, the width will adjust based on the text content. I have created a fiddle with two menus, each ...

Is there a way to attach a CSS class to a BoundField in order to locate it using jQuery?

I need to assign a specific class name to certain BoundFields within the GridView control. This way, after the GridView has been populated with data and displayed, I would like to have something similar to the following: <td class="Tag1">Some data c ...

Are there any methods available to ensure that images maintain consistent quality on an HTML webpage without being stretched?

Within a card-group container, I am utilizing pre-built components from Bootstrap. The 'products' variable holds an array of JSON objects representing products for an online shopping store. <div class="card-group"> <% p ...

Can Highchart dynamically adjust color choices based on the quantity of data points available?

I am trying to figure out how to import a specific color palette into my column graph. I want to use different color palettes based on the number of data points in my graph - for 3 or fewer points, I want to use the top row colors, for 4 points I want to u ...

MUI version 5 - Keep styling separate from component files

Seeking to segregate styling from component File in MUI v5. In the past, I accomplished this in v4 by utilizing makeStyles as shown below: Page.style.js: import { makeStyles } from "@material-ui/core"; export const useStyles = makeStyles({ ro ...

Looking to enhance my JavaScript skills - Codepen samples welcome!

I have incorporated this code pen in my website to create a menu button for mobile view: http://codepen.io/anon/pen/LNNaYp Unfortunately, the button sometimes breaks when clicked repeatedly, causing the 'X' state to appear even when the menu is ...

Incorrect synchronization in the SVG arrow animation

How come the arrow doesn't start moving at the same time as the line? Is there a synchronization issue? I want the arrow to begin its journey simultaneously with the line. .container{ width:100%; padding:0px; background-color: black; } .squig ...

"Mastering the art of underlining individual components in React with the power of

Hey there, I'm having some issues working with the CSS for my component. I've created a joke component that has joke and punchline props. The issue is that when it appears in the compiler, my joke component (which I call twice) only shows up as t ...

Unwanted slideToggle behavior

I am currently working on creating a navigation menu using jQuery's slideToggle function. However, I have encountered an issue where the dropdown menu keeps sliding up and down quickly when hovering over all of them at once. I would like to modify th ...