Web mobile fixed layout and input and other forms of love hate revenge-the ultimate bug, the perfect solution

The "Problem" mobile development, under iOS when the fixed attribute and input box inputs (here is not limited to input, as long as the mobile input can be invoked, such as: TextArea, HTML5 contenteditable, etc.), while the existence of the time;
Two heroes in a moment of intense chemical reaction, there are all kinds of wonderful problems, see:

The "Conclusion" input box Position property value is not fixed, but becomes absolute

"What happens" when we call the keyboard, the input box is no longer the bottom of the page, or the page can continue to scroll down, or the page does not scroll to the bottom, this time will appear above the problem

"Learn to fail, grow up in failure," and then we start to open Battle mode:

"Solution" Since the soft keyboard appears in iOS, the page fixed property will be invalidated, resulting in scrolling along with the page, so if the page does not scroll too long, then even if the fixed property is invalid, can not follow the page scrolling, the problem is no longer exist

The page is divided into two parts, the upper part of the Content section, the next part of the input box section, both of which use the fixed property, so that the page can not be scrolled, just in line with our thinking above, the above content part of the use of Overflow:auto, direct support in its internal scrolling;

To this, by the fixed and input love hate hatred, should be resolved, the above problems also no longer appear, but the corresponding also produced other problems

"New Problem 1" The content of the top part of the scroll is very fluid, the sliding finger release, the scroll immediately stop, lost the original smooth scrolling characteristics (you can search on the "elastic scrolling" information to understand)

"Solution" using -webkit-overflow-scrolling:touch; Properties to solve the problem, page scrolling restore smooth

"New Problem 2" when scrolling to the top and bottom of the page, if you continue dragging will drag the entire page together, causing the page "threadbare" phenomenon, such as:

At the same time, when we do the content scrolling, sometimes slide the lower part, causing the content to scroll to stop, the user's experience is extremely uncomfortable

"Workaround" Settings page Overflow:hidden; (i.e. body tag), the problem is this, get the perfect solution

Note Note! Note! "Here's a summary of some other details.

1. Overflow:scroll/auto; With its own compatibility, such as: Some Android systems do not support this property, so we need to use the Isscroll.js third-party plug-in, to implement the page internal scrolling

2. When using the third-party input method under iOS, when the input method is awakened, a box is obscured, which temporarily does not find a solution, first dig a hole, bury it.

Web mobile fixed layout and input and other forms of love hate revenge-the ultimate bug, the perfect solution