Shulou(Shulou.com)06/03 Report--

This article mainly introduces the following iOS11.3 modal input cursor dislocation how to deal with, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

Let's take a look at the effect of dislocation:

This was originally a BUG of the iOS system, but it was fixed in later iOS11.3 systems.

Solution:

Add a style to the body tag:

Body {position: fixed; width: 100%;}

Or

Body {overflow: hidden; height: 100%;}

Ios11, the dislocation of the input frame in the pop-up layer

Before the development of a Wechat project, security launch, the iPhone suddenly appeared during the maintenance of the cursor dislocation, after inspection, found to be the latest ios11 system pot.

Details: the pop-up layer uses position: fixed; pop-up layer with an input/textarea input box. Mac users of the ios11 system click on the input box, and after the keyboard appears, the pop-up layer is topped up, while the cursor stays in the same place, that is, dislocation occurs.

The solution is as follows:

1. Resolve cursor dislocation: pop-up layer is set to position: absolute;body add position: fixed

two。 Pop-up layer repositioning: get the scroll bar height and set it to the pop-up layer top value

Function getScrollTop (): string {const scrollTop = document.documentElement.scrollTop | | window.pageYOffset | | document.body.scrollTop; return scrollTop + 'px';}

Solve the problem encountered in the process: when body is set to position: fixed, once the pop-up layer Top attribute is assigned, the page will go back to the top by default, and the user experience will be very poor.

On this basis, it is decided not to set the location of body, but to restore overflow: initial; when users such as overflow: hidden; finish the operation and close the pop-up layer. The disadvantage is that the content at the bottom of the pop-up layer can no longer be scrolled, but it does not have much impact on the user experience. After testing on pc and releasing the test environment, the real machine test is almost explosive, and the bottom content can still slide freely, with the free and happy sliding of the pop-up layer fixed to the upper page.

Pit 2: mobile sets overflow: hidden of body does not work, even if additional height: 100% is added.

Following the train of thought, I decided to block the touchmove event of the page to realize the idea of fixing the bottom page.

Public fixBg () {/ / block touchmove event document.addEventListener ("touchmove", function (e) {e.preventDefault (); e.stopPropagation ();}, false) at the bottom of the page;} public flexibleBg () {/ / restore touchmove event document.addEventListener ('touchmove', function (e) {e.returnValue = true;}, false);}

In this way, the problem that the page will jump back to the top is solved, but after the release, the actual test found that the pop-up layer was in the wrong position, and the execution result of pop-up getScrollTop () showed 0. 5%. This is another ios pit, which is still being filled.

Thank you for reading this article carefully. I hope the article "how to deal with the dislocation of the input cursor in the modal below iOS11.3" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.