IOS11, the input box in the pop-up layer cursor dislocation keyboard pop-up, enter information, the cursor has been jumping

Before the development of a project, the maintenance of the Apple phone suddenly appeared cursor dislocation phenomenon, after troubleshooting, found to be the latest IOS11 system of the pot.

The situation: The pop-up layer uses position:fixed, the pop-up layer with the Input/textarea input box, IOS11 system of Apple users in the input box, after the keyboard, the pop-up layer is top up, and the cursor remains in place, that is, the dislocation situation.

Solution Ideas:

1. Resolve cursor Dislocation: The popup layer is set to position:absolute;body add position:fixed;
2. Popup layer repositioning: Gets the scrollbar height set to the top value of the popup layer;

   function Getscrolltop (): string {
     Const SCROLLTOP = Document.documentElement.scrollTop | | Window.pageyoffset | | Document.body.scrollTop;
     return scrolltop + ' px ';
   }

Problems encountered during the resolution: After the body is set to position:fixed, once the pop-up layer Top property is assigned, the page defaults back to the top and the user experience is very poor.

On this basis, decided not to set body positioning, changed to Overflow:hidden; When the user finishes the operation, closes the popup layer, then restores the overflow:initial; The downside is that the content at the bottom of the popup layer can no longer be scrolled, but has no significant impact on the user experience. After testing the test environment on the PC, the real machine test simply explodes, the bottom content is still free to slide, and with the pop-up layer fixed in the upper page of the free and comfortable sliding.

This finds the Pit 2: the mobile side setting body Overflow:hidden does not take effect, even if additional height:100%;

Down the line of thought, decided to take the Touchmove event to block the page to achieve the idea of fixing the bottom page

Public Fixbg () {//block Touchmove event at bottom of page
Document.addeventlistener ("Touchmove", function (e) {
E.preventdefault ();
E.stoppropagation ();
},false);
}

Public Flexiblebg () {//Recovery Touchmove Event
Document.addeventlistener (' Touchmove ', function (e) {
E.returnvalue = true;
}, False);
}
、
From:https://www.cnblogs.com/telumy/p/8257591.html

Explain the fixed good link

Http://efe.baidu.com/blog/mobile-fixed-layout/?utm_source=tuicool&utm_medium=referral


Clicking on a button in a page will bring up a popup box, which gives the fixed positioning, and the width is equal to 100%, in this pop-up box contains the input box div, this div does not do positioning settings. Page operation can not see what problem, the real machine operation will find that there is no problem on Android, but on the iOS on the problem, especially the IOS11 system, the problem is very obvious. In the input box input content, the phone will pop up a keyboard, and then input the cursor in the box with lost soul-like disorderly channeling, this thought will be the individual phone screen problems, take out a few iOS test machine, a simple test found, is a common problem, especially in the ios11 more obvious. Looking at the scurrying cursor, instantly lost 13.
A simple look, learned that this is a hole in iOS, the predecessors have given a number of solutions, see a few related technology blog, read it, that is the hair thing, suddenly the heart is not smooth, and then try to follow their own understanding of the idea to solve, the result has become, the soul of the cursor has finally come back. Here to share my solution:
This problem is most likely to occur if the popup box is fixed and the box is entered in the popup box. A very simple solution, you remove the fixed position, change the way you style expression. I am here to change the pop-up box to absolute positioning, the parent element of the popup box is changed to relative positioning solution.

IOS11, the input box in the pop-up layer cursor dislocation keyboard pop-up, enter information, the cursor has been jumping