IOS11, the input box cursor dislocation in the popup layer

Before the development of a project, safe on-line, 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:relative;
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:relative, 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);
}
As a result, the page will go back to the top of the problem solved, but after the release, the actual test found that the pop-up layer location error, pop-up getscrolltop () the execution results display as 0. This is another iOS pit, and is still in whined whined's fill.

IOS11, the input box cursor dislocation in the popup layer