Remember a wechat H5 development pit…

Normal effects are as follows:



I use cube UI development, the upper part is written by myself, the lower part is better Scroll, in order to slide more smoothly. This page is preceded by a login page, which jumps to the home page.

On Android and browser, and even wechat developer tools are fine, but on iPhone, it looks like this. Miraculously, you can refresh and then come back to the page again without any problems.

Here is the bug display:



It’s really frustrating not to be able to reproduce a bug where you can debug it, and finding the cause is a matter of guesswork.

(If you have any good method can realize the wechat H5 page real machine debugging method, please let me know, thank you ~!)

Speculation is a:

The page above is crowded up by the return bar below. Then I started to look for the materials for the evening. There are probably two types of materials online:

  1. Direct and simple 

    window.WeixinJSBridge.call('hideToolBar')Copy the code

    This method has been verified by me,invalidJust in time to refute the rumor.

  2. The white bar is generated because there is a history, so avoid history: all page jumps can be replaced with replace


When I use the second method to realize the hidden white bar function, the jubilant and hurried to log in, but lost is that the red button sagged, but the top is still crowded up.

Okay, I’ll learn a way to hide the note

A little confused at first.

  • Window. clientHeight and window.scrollHeight were rendered at the wrong height, but when alert was set, they were the same
  • But I was happy to find that the login page and other normal pages told different, more than a navigation height.
  • After that, I thought that MY CSS is not written standard, should not ah. Try everything possible, but that’s not the problem.

But by looking at that page over and over again, suddenly once you’ve entered your password, turned off the soft keyboard and found a gray bar at the bottom of the login page, then slid down the page and logged in again, the page was fine

And then you have

Suppose 2:

May be the soft keyboard to squeeze up the page, because there have been soft keyboard problems before.

At this time to universal Baidu search, if there is such a problem: the soft keyboard will squeeze the page up, and will not come back, so the need to manually pull down, so before the page jump to execute

Window. Scroll (0, 0)Copy the code

With excited mood, open the page, finally realized ~! happy

Finally can leave work ~!

In addition, there is a question, iPhone wechat terminal localStorage is there any clear way? Beg everybody great god advice ~ ~!