SoFunction
Updated on 2025-04-06

Solve the problem of leaving blank space at the bottom of the page after the soft keyboard of the WeChat H5 page pops up on the IOS side

Preface: WeChat H5 project, the page will not rebound after entering the soft keyboard and hide it after hiding it, and there will be a large piece of white space below.

Recently, WeChat and iOS have upgraded versions. I don’t know which upgrade caused it. However, after testing, after the soft keyboard is closed, scroll the page again, and the blank space below will disappear. So just simulate this "scroll" operation after the input is completed, and the problem can be solved.

If written in vue:

<input type="text" @blur="fixScroll" placeholder="Please enter xxx"/>
//Add to methods:fixScroll() {
  (0, 0);
}

Because this problem only occurs on iOS, make a judgment before use:

 fixScroll() {
    let u = ;
    let isiOS = !!(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios terminal    if (isiOS) {
     (0, 0);
    }
   }

Summarize

The above is the problem of solving the problem of blank space at the bottom of the page after the soft keyboard of the WeChat H5 page pops up on the IOS side. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!