I recently encountered a bug in the mobile front end: the cursor may be misplaced when the input box in the pop-up box of the mobile phone is focused.
At the beginning I had absolutely no idea what was the cause of the error, I had no problem at all when debugging on my computer, and I didn't find a pattern when things went wrong on my phone. Later, I searched a lot of information on the Internet, and finally found the general direction of the problem in several Chinese articles: "There is a problem with the fixed positioning pop-up box in the Apple mobile phone system", but there is no good solution, the explained bug There are various reasons. Finally, I googled keywords such as "fixed input cursor" and finally found a detailed answer in English ( link to the article ), and I also verified the correctness of it. Next, I will write about the useful information I got and my own experience, not a direct translation.
BUG
If you have an input in a fixed container, and you select the input, the keyboard will pop up at this time. If your input is in the lower position, you have to scroll the interface. At this time, you will find that the cursor is misplaced and scrolling The more, the greater the dislocation.
There is no perfect solution, first upgrade IOS to 11.3
The bug exists in the IOS system version 11.0 to 11.2X (10 or earlier, there should be no such bug, as for which version the bug appeared, I don't know, because I only updated the system for a long time, as mentioned earlier The article did not clearly point out), the latest version of IOS 11.3 has fixed this BUG. I have tried an Android phone and there is no such bug. This bug did not appear on my mobile phone a few months ago. Later, I upgraded the mobile phone system to 11.26 and found this bug. Unfortunately, most of the people in our company use Apple mobile phones and the mobile phone system is 11.XX, so they have it. This bug caused me to have no idea that it was caused by the mobile phone system for about a month. Finally, after I upgraded my phone to the latest version 11.3, this bug really doesn't exist anymore! (Then I went to persuade other people in the company to upgrade the mobile phone system)
Here are a few other methods I found and some of my insights:
1. Basically all articles point out that the solution is to change position: fixed; to display: absolute;, but in this case, the pop-up box will not look like a pop-up box on a large computer screen if it is not in a fixed position (or detect the width and height of the screen. to define whether it is a mobile interface?);
2. Abandon the use of pop-up boxes, but this method may lead to huge workload and unsightly;
3. When the popup appears, display it in full screen and hide the rest with display: none;. This method may also be very labor-intensive. Our company platform uses a lot of pop-up boxes. It is too expensive to do so, but the author of the article I mentioned earlier said that he took this method and it is feasible.
Of course, your customers may be using systems with this bug, and you can't force them to upgrade
At present, our company's practice is to put this problem aside. As far as I am concerned, not many of our customers use Apple mobile phones (most of our customers are people living in Paris, and it seems that more people use Huawei), And there are even fewer people whose system happens to be 11.0-11.2X, and they will upgrade their mobile phone systems in the future.