In landscape mode on Safari for iOS, the final item in a vertical flexbox may be cut off

Describing my app: It is structured as a 3-row flexbox column.

<div class="app" style="display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: space-around;">
    <div class="question-header" style="-webkit-flex: 0 0 0;">...</div>
    <div class="question-interactive" style="-webkit-flex: 1 0 0;">...</div>
    <div class="navigation" style="-webkit-flex: 0 0 0;">...</div>
</div>

While this layout functions perfectly across desktop and mobile browsers, a peculiar issue arises on Safari for iOS in landscape mode. The navigation bar overflows off the screen.


This issue is exclusive to Safari for iOS in landscape orientation, with no occurrence on desktops or in portrait mode. Could this be a known bug in Safari for iOS? Any insights into my oversight would be appreciated. It appears that the navigation div is failing to calculate its height from the content correctly. I am willing to provide further details or code snippets for better clarity on the problem.

htmlioscsssafariflexbox

Answer №1

It's interesting to discover that Safari for iOS has a peculiar bottom bar that disrupts the innerHeight calculation. How fascinating, right?!

The solution is to dynamically identify if the user is on Safari for iOS (through UserAgent filtering, haha) and then adjust the body height accordingly to accurately reflect the page size:

if ( UserAgent.says.it.is.iOS.Safari ) {
    $('body').css('height', window.innerHeight);
}

You can calculate the necessary height adjustment by subtracting the viewport's actual height (window.innerHeight) from the document's clientHeight:

var delta = document.documentElement.clientHeight - window.innerHeight;

This insightful Stack Overflow post shed light on the issue: Ipad: window.height() give bad value in Safari but not in Chrome

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

Incorporate Bootstrap into your Bigcommerce stencil theme for seamless design integration

As a newcomer to BigCommerce's Stencil theme, I am looking for guidance on integrating Bootstrap into the theme for local development. Is it feasible to incorporate custom CSS and JS into the Stencil theme as well? ...

csstwitter-bootstrapthemesbigcommerce

CSS must be applied to various sections of an HTML document

For example, I have 2 CSS files. In one CSS file, I have the style: a{color: blue;} In the second file, I have: a{color: red;} I want to apply these styles to my HTML file. <div> <a>first file ...

htmlcss

Insert a section of background within the div

Does anyone know how to create a div with a partial background like the example shown here? https://i.sstatic.net/CDqCe.png I attempted to add white margin, but I'm struggling to get it right. ...

htmlcss

Transforming CSS styles into Material UI's makeStyles

My CSS styling was originally like this const Root = styled.div` display: flex; flex-direction: row; margin: 0 auto; width: 100%; position: relative; @media (min-width: ${(p) => p.theme.screen.md}) { width: ${(p) => p.theme.screen.md ...

cssreactjsmaterial-ui

Displaying an image on canvas while showing a loading progress bar

I'm attempting to utilize this function to load an image into my canvas: function handleImage(e) { var reader = new FileReader(); reader.onload = function (event) { var img = new Image(); // img.onprogress = function (e) { ...

javascripthtmlcanvas

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. Th ...

javascripthtmlcss

Navigating through the UINavigationController in iOS for the login process

Solved: After a user logs in or signs up, use the code below to transition to the main storyboard... UIWindow* window = [[UIApplication sharedApplication] keyWindow]; window.rootViewController = [[UIStoryboard storyboardWithName:@"Main" bundle:[NSBund ...

iosobjective-c

Concealed Separator for Text Elements in HTML

I am in search of a method to distinguish certain specific strings within HTML code. Although I can recognize the desired strings, they may also appear as part of longer strings throughout the document. In order to locate them, I currently insert a special ...

htmlnon-printing-characters

Display a tooltip when you click on a different element

I have a unique feature that I want to implement on my website. The idea is to display a tooltip when a user clicks on a specific div with the same ID as the tooltip. This will be particularly useful for interactive questions where users can click and reve ...

jqueryhtmlcsstooltip

Develop a circular carousel using React JS from scratch, without relying on any third-party library

I am looking to replicate the carousel feature seen on this website. I want to mimic the same functionality without relying on any external libraries. I have found several resources explaining how to achieve this. Most suggest creating duplicate copies o ...

javascripthtmlcssreactjs

Updating Django database records with ajax

I'm currently working on a feature that involves filtering table data and updating the table using ajax. Here's what I have so far: Filter Form: <form id="search" method="POST" action="{% url 'article-filter' %}"> <input ...

javascripthtmldjangoajaxforms

How can we improve app functionality for applications created using React Native?

I am looking for a way to automatically update my react-native application on my customer's device. How can I send updates - is it through push notifications with a link to download and install the new version of the app, or is there a better method? ...

androidiosreactjsreact-native

What are the steps to creating a dynamic, layered column design using HTML?

I'm looking to create a layout that resembles the one on www.PInterest.com, featuring varying numbers of columns depending on the browser width (responsive design). My challenge lies in stacking the boxes vertically with different heights, without let ...

htmlcss

Updating Checkbox Appearance in Angular 6 Based on its Checked Status

I have created a checkbox list and I am trying to style the checked item with an underline. Here is my code snippet: TS file: currentQuarter: string; quarters: Observable<MeseRiferimento[]>; q1: MeseRiferimento = new MeseRiferimento(); q2: MeseRife ...

cssangularcheckboxcss-selectors

What is the best way to upload multiple files in Laravel using Guzzle?

Currently, I am facing an issue while trying to upload files to an external server using JWT for authentication. Here is a snippet of my form: <form action="{{ route('operations.photos-for-families.upload', [$operation, $current->index ...

phphtmllaravelguzzle

Is it possible for an object hidden in the DOM using jQuery to magically reappear when you click the back button or use the bfc

Is there a way to prevent a box from reappearing when using the back button on a webpage? On my website, there is a box that shows up on the first visit. However, when navigating using the back buttons on the site or the browser back button, the box appea ...

javascriptjqueryhtml

Creating Spinning Text Effects in Internet Explorer with CSS

Inside a list item (<li>), I have some text that I want to rotate 270 degrees. Direct methods in FireFox, Safari, Chrome, and Opera work fine for this, but when it comes to IE, there is no direct support. I've tried using filters like matrix and ...

cssinternet-explorer

Utilize Electron to extract and render content from a local file into HTML code

I am struggling to find a solution for automatically reading and parsing a local csv file in an electron application. When I use 'fs' to open the file, I can't figure out how to pass the contents into the HTML window. One option is to use a ...

javascripthtmlnode.jselectron

Apply bold formatting to the HTML text only, leaving the EJS variable untouched beside it

https://i.sstatic.net/X36eG.png Is there a way to format the text for "Guest signed up" and "Guests attended" in bold while keeping the values normal? Here is my current code: <li class="list-group-item">Guests signed up: <%= guestSignu ...

javascripthtmlbootstrap-4ejs

`Div Elements Overlapping`

Lately, I have been working on my personal portfolio and I encountered an issue with the contact form overlapping the footer. Can anyone provide some guidance on how to resolve this? Any help is greatly appreciated. https://i.stack.imgur.com/neIbs.gif ...

htmlcssoverlapping