Keyboard occlusion (iOS system) with input on the bottom of the page-attached solution

On the project to make a message reply box.
Similar to this with a div set in the outside of input, click the button, the Div appears, located at the bottom of the page. and input gets the focus and automatically pops up the system keyboard.

However, in the development of the discovery, in the iOS system this div is always covered by the keyboard, has used a high-padded div box approach, naïve thought can make it move up, but found no use, need to manually pull up to come out.

Looked for a long time, to see many people on the internet died on this issue.

A more reliable answer was found on the know-how.
The reason is that fixed positioning plus bottom:0 in iOS invalid, someone suggested is to change the flexible layout, someone suggested JS control.

At first I also used the JS control, but found that the effect is not very good. Sometimes the first click, or the input box will be covered by the problem, you must manually swipe up, the div pulled out, click again, will not be obscured ... I don't know why ....

And there is no such problem on Android, it only appears on iOS and is also related to the version of the system. It used scrollIntoView() to be a lot easier to use, but then the reaction was obscured. I found that it was also related to the iOS version of the system. After referring to the answers on each road, I found a more reliable and eclectic approach. is to get the height of HTML or body, Then click on the scroll bar to scroll to the bottom.

    varScrollHeight= $(' HTML ').prop("ScrollHeight");    varTarget= Document.getElementById("Comment-content");     Target.Focus();     //timer is used to make the input box slide more naturally    SetTimeout(function(){        //target.scrollintoview (true);        //target.scrollintoviewneeded ();        $('. Add-comment ').Animate({scrolltop:ScrollHeight},  -);    }, -);

Commented out is the method used previously, in this way, with the setting html of labels and body labels height:100% and overflow: hidden to use more crisp ... But now that I have switched to it, I feel like it's scrollTop all the same, and I deleted it.

Keyboard occlusion (iOS system) in the bottom input of the page-included solution