IOS11 cursor Dislocation problem

IOS11 after the release, the tester feedback back, when the keyboard bounces, the input cursor will not be positioned.

Later looked up the information, originally is position:fixed, and input with the use of the bug will appear. Should say, is fixed on mobile side support not very good.

There is also a mask layer underneath my input box pop-up layer, my mask layer is fixed, and when the keyboard bounces, the iOS viewport calculates the problem, causing the cursor not to follow the password pop-up box.

Online to see some methods, and do not want to use plug-ins. In general, it is a fixed compatibility issue. So I later used a stupid method.

When input is focused, the mask layer's position is set to absolute, allowing the entire page to scroll to the top, losing focus and returning to the original fixed. In order for the box that entered the password to be in the middle of the keyboard,

You need to recalculate the location of the entire box where the password was entered. Let the entire page scroll to the top to recalculate the viewport height when the keyboard bounces.

This solves my problem.

If there is a better and more elegant solution, the faithful hope to give advice.

IOS11 cursor Dislocation problem