Issue with iOS Mobile Safari Navigation Bar/Toolbar when changing orientation

Experiencing some unexpected behavior with iOS mobile safari on version 13.3.

I have a website that functions as a single page application for the most part. Due to this, I have set its height/width at 100% and adjusted the content accordingly. While everything works perfectly on other browsers and devices, iOS Safari is presenting an issue when transitioning from portrait mode to landscape mode, and then back to portrait mode.

The problem seems to be related to the navigation bar/toolbar and how the viewport expands when it hides. When testing on an iPhone 8 Plus, upon loading the page with the bars visible, the height reads as 622px. Upon rotating to landscape mode, the height shrinks to 414px. However, when rotating back to portrait mode, even though the bars are hidden (or reduced in case of the navigation bar), the height remains 622px. This results in a significant gap at the bottom of the page where window.innerHeight still registers it at 622px. Opening and closing the navigation bar causes the view to adjust correctly, showing a height of 697px.

If I switch from using percentage-based sizing to viewport height (100vh) instead, the page extends behind the bars.

Any advice or insights would be highly appreciated!

Upon Initial Loading:

After switching to landscape and back to portrait:

htmlcssmobile-safari

Answer №1

Encountered the same problem myself. Whenever I tap on the white bar, the toolbar would reappear, but all click events within the DOM seem to be off.

Here's a workaround that worked for me:

window.addEventListener('resize', () => {
  document.body.style.overflow = 'scroll';
  window.scrollTo(0, 0);
  document.body.style.overflow = 'hidden';
});

This may not completely eliminate the white bar issue, but it should address the problem with click events.

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

Tips for generating an HTML template as a string using jQuery

I have developed a dynamic modal using plain JavaScript, triggered by a button click. This modal is controlled based on the attributes `data-open-hours` and `data-closed-hours` in the HTML. If you take a look at my demo, you will notice an issue. Let me e ...

javascriptjqueryhtmlcsstwitter-bootstrap

Positioning absolute elements negatively in Firefox may cause unexpected behavior

I attempted to position an absolute element with a negative value, and it works perfectly in every browser except for Firefox. In Chrome, IE, or Safari, the blue handler box is correctly positioned in the middle of the top border. Is there a workaround to ...

htmlcss

The CSS selector functions as expected when used in a web browser, however, it

While conducting test automation using Selenium, I typically rely on css selectors to find elements. However, I recently came across a peculiar issue. I observed that in certain cases, the css selector works perfectly when tested in the browser console. Fo ...

javascriptjquerycssseleniumcss-selectors

Effect of Active or Focus on the HTML <ul> element

Check out this example of a UL tag: <ul style="list-style-type:none; padding:5px ; border:solid 1px #666666;"> <li>I am waiting </li> <li>I am waiting </li> <li>I am waiting </li> <li>I am wa ...

javascripthtmlcss

Creating UL tabs using just HTML and CSSHere's a step-by-step guide

Looking for help to accomplish this task. I already have the styling, but I want something to happen when I click on the tabs. Specifically, I want the div with the tab class names to show and hide upon clicking the tabs. Currently, nothing happens when I ...

htmlcsstabshtml-lists

Steps to implement an image zoom function triggered by a button click

I'm working on a school project that requires me to use only html, css, and javascript for creating a website. Currently, I'm designing a landing page with a button that will navigate the user to another page. My goal is to have the background im ...

javascripthtmlcss

What is the process for retrieving matched information from a drop-down menu in HTML?

Is there a way to retrieve data from angularjs like this: This is the list of data I need to access: $scope.orderStatus = [ { os: 'Open', value: 1 }, { os: 'Completed', value: 2 }, { os:'Cancelled',value: 3 }, ...

javascripthtmlangularjsnode.js

Discovering elements with Selenium

While using selenium, I stumbled upon this web element: <td style="padding-right: 10px; " **onclick="javascript:show_me('CarDetails.php?CarID=2358912&SubCatID=1**', '2358912', 560, 'ActiveLinkVisited');stat( '../& ...

javajavascripthtmldomselenium

Shutting down the jQuery pop-up

I am struggling with trying to display this code as a popup on my website. Here is the code I have: <div id="myDialog" title="myTitle"> <div class="table_cell"> <div class="message"></div> </div> <div class="tabl ...

javascriptphpjqueryhtmlyii

Incorporating HTML into a WordPress Plugin

I am currently working on my very first WordPress plugin. The main purpose of this plugin is to display a message on the plugin page whenever a user saves or edits pages. However, I'm experiencing some issues with printing out these messages. Here&ap ...

phphtmlwordpress

Utilize CSS to break apart text (text = white space = text) and align text in a floating manner, allowing

Is there a way to use CSS to create a white space in the middle of text? Currently, I am manually breaking the text, which is not ideal. I am aware that there is a function that allows the text to end and start in another div, but unfortunately, it is not ...

javascripthtmlcsstextstyling

What is the best way to activate a CSS animation?

I've hit a roadblock while attempting to trigger a CSS animation. Here's my CSS: h3[id="balance-desktop"]{ color: black; -webkit-animation-name: gogreen; -webkit-animation-duration: 2s; animation-name: gogreen; animation-du ...

javascripthtmlcss

The website does not display properly on larger screens, while showing a scrollbar on smaller screens

I'm encountering an issue with my website where I can't seem to find a solution no matter what I try. My goal is to ensure that my website looks consistent across all computer screen sizes. However, when viewed on larger screens, there's a ...

htmlcss

switch out asterisk on innerhtml using javascript

Is there a way to replace the asterisks with a blank ("") in the innerHTML using JavaScript? I've attempted this method: document.getElementById("lab").innerHTML = document.getElementById("lab").innerHTML.replace(/&#42;/g, ''); I also ...

javascripthtmldom

Media queries do not trigger the execution of CSS code

I am currently working on making a desktop-sized website responsive. However, I have encountered an issue where the CSS rule is being read by the browser but not executed, regardless of whether the media query rule is true or not. I have already included & ...

cssmedia-queriesresponsive

Attempting to determine the smallest and largest dimensions of two values using CSS3

Trying to make sure the image on my phone adjusts its size based on orientation, I attempted using Ionic4. When in landscape mode, I want it to adapt according to height instead of width. Essentially, I need it to use the minimum size and also require the ...

cssionic-frameworkimage-size

Exploring the ID search feature in JavaScript

I'm facing an issue with implementing a search feature in my project. Here is the HTML snippet: HTML: <input type="text" id="search"> <video src="smth.mp4" id="firstvid"> <video src="smth2.m ...

javascripthtml

Strategies for styling the contents within <details> while excluding <summary> in CSS

I'm attempting to apply a 10px padding to the Story box using CSS, without introducing any additional HTML elements into the website code. Is there a way to include the padding in the Story box without incorporating a new HTML element? To clarify: H ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

The issue with jspdf is that it is failing to generate PDF documents of

I'm currently developing a resume builder app using ReactJS. One of the functionalities I'm working on is enabling users to download their resumes as PDFs. However, I've encountered an issue with the generated PDFs when using jsPDF. The down ...

javascripthtmlcssreactjsjspdf

Enhancing the appearance of the CSS panel with Font Awesome icons

I need help adding a fontawesome or any other icon to my CSS3 based sliding panel button. The icon should change from open to close when clicked on. Any ideas on how to achieve this would be greatly appreciated! * { margin:0; padding:0; font-famil ...

css