Ios11 popup layer input box cursor shift problem

The requirement is as follows: the user clicks the button on the page to pop up the floating layer. There are two input boxes on the floating layer, input the user name, mobile phone number and other information respectively, and then click registration. The fixed positioning is used for the floating layer. Everything was fine until we tested it on a real machine… what??? In ios11, the cursor in the input box on the float is a mess.

So the Internet query that ios11 system MAC users click on the input box, keyboard, pop-up layer is top, and the cursor still stays in place, that is, dislocation, and get the following method:

1, scheme 1: Someone said to set the pop-up layer to position: Absolute; Body add position: fixed; Then get the scrollbar height and set it to the Top value of the pop-up layer. It looks nice, but once the Top property of the pop-up layer is assigned, the page will default back to the Top, which makes the user experience very bad.

2. Scheme 2: The pop-up layer is still position: fixe. Add position: Fixed to the body when the pop-up box pops up. Gets the scrollbar height

H=$(window).scrollTop();
Copy the code

When the frame is closed

$("body").scrollTop(H);
Copy the code

In this way, after the user closes the popup window, the page is still in the original browsing position, and solves the problem of cursor confusion; But at the moment when the popup box pops up, through the shadow float layer, you can see that the bottom page is still back to the top, so when the popup box also gives the body a scollTop? But it didn’t work.

3. Scheme 3: The pop-up layer is still position: fixe, but when the pop-up box pops up, set the body and HTML styles to:

$("html,body").css({
    "width": "100%"."height": "100%"."overflow": "hidden"."position": "fixed"
})
Copy the code

Gets the scrollbar height

H=$(window).scrollTop();
Copy the code

Give to the body

$("body").scrollTop(H);
Copy the code

When the frame is closed:

$("html,body").css({
    "width": "auto"."height": "auto"."overflow": "auto"."position": "static"
})
Copy the code

Add the scrollbar height you just fetched to the body. Cursor problem resolved, and the page does not run!

PS: 1, some people said that the idea of fixing the bottom page by blocking the touchmove event of the page was tried, but the effect was not good, and it was not adopted. 2. There are some minor problems with the cursor, that is, the dot does not appear for the first time, but can be input normally, but the dot does not appear until the second time. I do not know the reason at present.