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:

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

After switching to landscape and back to portrait:

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

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

Using Html.BeginForm to route to a Web Api endpoint

I need help figuring out how to make my page post to my Web API controller instead of my Area/Controller/Action. I've tried using both Html.BeginForm and Ajax.BeginForm, but haven't had any success so far. Here's what I've attempted: @ ...

c#htmlasp.net-mvcasp.net-web-api

Troubleshooting problem with Angular Materials' md-datepicker not displaying correctly in wide browser windows

While using the md-datepicker component in my application, I noticed that it does not display properly on larger browser widths. It only seems to work as expected on small and x-small viewports. Please refer to the attached screenshot for reference. This ...

javascriptcssangularjsdatepickerangular-material

Encourage the user to download and install the ActiveX/.Net Class Library directly from their browser

When I developed a .NET Class Library project that interacts with mshtml.HTMLDocument from JavaScript, everything functioned correctly on my local machine after adjusting permissions in .NET Configuration for Trusted Sites to grant Full access. However, I ...

.nethtmlpermissionsactivexprompt

Incorporating a YouTube channel into mobile websites

While it's relatively easy to embed single YouTube videos in mobile pages with the help of Google, I'm still struggling with embedding a whole channel. The issue seems to revolve around the screen width, and my attempts at using JavaScript have n ...

javascripthtmlmobile

creating a multi-tiered dropdown menu using both CSS and JavaScript

I am in need of a multi-level (drop down) menu feature, that allows me to make changes to the menu in just one file, without having to navigate through each individual page. I require a three level menu. I have attempted to modify someone else's code ...

javascripthtmlcss

Flexbox alignment issue: Text is not vertically centered

I'm facing an issue with centering my content vertically. Upon inspecting the divs, I noticed some empty space below them that seems to be causing the problem. When I tried adding <line-height: 3> in the dev tool styles, it seemed to center prop ...

htmlcssflexbox

Shaky parallax movement

I recently created a website with a parallax effect, but I'm experiencing some performance issues with jittery movement. The page uses CSS3 transform scale to zoom in and out, and automatically resizes on page resize with JavaScript/jQuery. For the ...

javascriptjquerycss

What advantages and disadvantages come with the top Java HTML parsing tools on the market?

In my search on StackOverflow and Google, I have come across a few recommended Java HTML parsers that different parties consistently suggest. However, I've had trouble finding in-depth information on the strengths and weaknesses of these libraries. I& ...

javahtmlparsing

Title appears to be left aligned instead of centered

My H1 is having trouble centering as I increase the font size. It positions correctly with a smaller size (30px), but when I increase the font, it becomes too low from the center even though text-align:center; is not helping to solve the issue. What adjust ...

htmlcss

Is there a way to postpone the mouseover event for vertical tabs?

While this may seem like a simple question to some, my programming skills are not quite up to par. I am seeking help from someone who can assist me. My goal is to delay the mouseover event on vertical tabs so that users can jump directly from tab 1 to ta ...

javascriptjqueryhtmlcsstabs

What would cause this to result in a blank array?

I have a main component that contains multiple sub-components, which I navigate between by clicking on different elements. These sub-components are all Vue files. What I am trying to achieve is to dynamically highlight the active component when it is bein ...

javascripthtmlcssvue.js

In Bootstrap 4, the positioning of :after is different compared to Bootstrap 3

Our bootstrap nav-tabs have a unique default look with an 'indicator' icon below the selected tab. This is achieved by styling the active anchor element as follows: https://i.sstatic.net/UQos5.png However, when migrating to bootstrap 4, we noti ...

htmlcsstwitter-bootstrapbootstrap-4

Why is the inline-block element in the list displaying on two lines? The text contains a number, but does it affect the layout?

What could be the reason for 'Maroon 5' moving down to a second line? Despite adding extra characters and testing with an integer, the issue persists. <ul id="soundsLike"> <li>Foo Fighters</li> <li>Maroon 5</ ...

css

Utilize the text box feature for manipulating the data field in Angular4

Within my grid view, there exists a column labeled remark. This specific field contains various values, one of which is absence. My objective is to modify the remark value exclusively when it is equal to absence, followed by clicking the corresponding icon ...

htmlangulartypescript

Embedded tweets may occasionally lose their borders when viewed on various web browsers

My goal is to showcase a collection of responsive embedded tweets in rows of 2. Here are the key elements of the code that have enabled me to achieve this: HTML <div id="tweets"></div> <script src="https://platform.twitter.com/widgets.js" ...

javascripthtmlcsstwitter

Replacing the tbody element in React with centered text using inline styles ---If you want

I am working with an empty array in React that I translate into state. When the array is empty, I want to insert a text that says "no match events yet..." into a react-bootstrap Table's tbody. In the current setup, I am struggling to center the text ...

javascriptcssreactjsreact-bootstrapinline-styles

Trouble with Angular 7: Form field not displaying touched status

I am encountering an issue while trying to input data into a form, as it is not registering the touched status. Consequently, an error always occurs when attempting to send a message back to the user. In my TypeScript file, I am utilizing FormBuilder to c ...

htmlangulartypescripterror-handlingruntime-error

Guide on moving to the following page of a website with the help of CSS selectors

I'm currently in the process of retrieving property details from a specific website (Find Properties For Sale). Initially, I successfully scraped the information from the initial page. However, upon attempting to gather data from subsequent pages, my ...

pythonhtmlcssscrapy

Ways to differentiate between a desktop browser width of 1024px and a tablet width of 1024px with the help of jquery

So here's the issue I'm dealing with: I have scroll-based animation functions set up for desktop browsers, and different animations in place for tablet browsers. The challenge is to make these functions work on a desktop with a 1024px dimension. ...

javascriptjqueryhtmlcss

Is it necessary to only override the monospaced font?

Can the monospace font in Angular Material be customized for just the <code>foo</code> blocks? I want to use a font where the number zero 0 looks distinct from the letter oh O. ...

cssangularangular-material