When Fixed encounters an iOS browser and the page slides, the browser's address bar disappears and the page becomes longer without covering the content below.

During the mobile development process, I encountered the use of fixed masks:

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;

The following problems will only occur on real machines:

When Fixed encounters an iOS browser and the page is pulled down and slid, the address bar at the bottom of the browser will disappear, the page will become longer, and the content below will not be covered, causing the pages below to be exposed. Video below:

Slide down and the underlying page will be exposed at the bottom.

Solution:

There is no good solution. . .

Method 1: Logically determine whether the underlying page is hidden

In the past, when I judged the global mask page to be displayed, the bottom page was hidden and v-show was hidden.

Method 1: Set css

html,
body {
    
    
	 height: 100%;
	 overflow: auto;
}

Although I don’t know why, adding this css definitely works.