Source code example: ios-fixed-input-tutorial
The position of use: fixed; To fix the position in the page of the parent container (modal box), which contains one or more children of the input box:
On IOS, when the keyboard is aroused, due to the absolute positioning of the modal box, the focus of the input box runs loose and input is abnormal.
After the soft keyboard is aroused, the fixed element of the page will become invalid (that is, it cannot float, which can also be understood as absolute positioning). Therefore, when the page is rolled over one screen, the invalid fixed element will follow the scrolling, so we need to use relative positioning for layout.
The basic DOM structure:
Do not use absolute positioning on containers containing input boxes, and if possible, do not center the container. Since the keyboard will push the modal box up when aroused, it is recommended to hardcode a height of 40px or 20% from the top.
Effect after repair:
In mobile terminal development, for the compatibility of IOS and Android scrolling, try to do local scrolling, not global scrolling.
Rolling relevant compatibility can refer to: rolling piece of mobile web | AlloyTeam
Of course, if the UI or PM is well communicated, it is best to avoid scenarios where the parent container needs to be fixed and contains input methods.