Weekly note 3--Fix fixed property fails after the iOS soft keyboard pops up

This week in the space ("like" QQ space) project. Home is a friend to say, you can say for each comment, comment box adsorption fixed at the bottom of the screen. At this point, the bug came ... On iOS, the fixed property fails after the soft keyboard pops up. It was later discovered that iOS most of the cases turned the fixed into absolute. Why is it that most of the cases, rather than 100%, are mentioned later. Here are 2 ways to plan ...

1. CSS layout ( recommended )

　　solve the idea : since the soft keyboard in IOS, the page fixed element will be invalidated, resulting in scrolling along with the page, then if-the page will not be too long to scroll, then even if the fixed element is invalid, can not follow the page scrolling, there will be no problem above.

　　So according to this idea, if the parent of the fixed element does not scroll, and the original Body scrolling area field is moved inside main, and the header and footer style is unchanged, the code is as follows:

　　result : Under the original input method, the fixed element can be positioned in the correct position on the page. When scrolling the page, the footer does not follow the page scrolling because it scrolls through the div inside main.

The above seems to solve the problem, but if the actual test on the phone, you will find the main element of the scroll is very fluid, the sliding finger released, the scroll immediately stop, lost the original smooth scrolling characteristics. Due to the problem of elastic scrolling, it is found in WebKit that the following properties can restore elastic scrolling :-webkit-overflow-scrolling:touch;

after the real machine test, found in the IOS10 system, the occasional click will still block the input box, so it says most of the situation can be. In fact, how to use this layout, fixed can be changed directly to absolute, so as to ensure that the different iOS system performance is consistent. 2. Use scrolltop to scroll to the bottom

First look at the layout code:

// when getting focus--scroll to the bottom interval = setinterval (function(    ) {=+); // lose focus Cancel clearinterval (interval);

In two ways, the first is more general, the second after the soft keyboard pop-up, although not obscured the input box, but when scrolling the page, you will find the input box following the scroll, so strongly recommend the first, simple and practical.

Finally, why does iOS not recognize fixed? Because the mobile phone screen will be able to display the content is not much, so do not want to have a relative screen fixed mobile phone elements, such as the sale of some web site aphrodisiac ads stuck on the screen, blocking reading.

Reference Link: https://www.jianshu.com/p/782e61068334?tdsourcetag=s_pctim_aiomsg

Weekly note 3--Fix fixed property fails after the iOS soft keyboard pops up