Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Let’s talk about what’s compatible

Let’s be clear about who this article is addressing, and then talk about how to handle it. Look at the picture first

This is a bug that occurs when browsing the company’s official account page using wechat browser in ios system. In ios, when browsing multiple interfaces of a web page, routing records will be generated, and the forward and backward function bars as indicated by the arrow in the above picture will be hidden with scrolling up and down.

There are two key points that must have a routing record to appear, and are hidden as they scroll up and down.

Hiding along with scrolling is easier to deal with, but it’s the timing of its appearance that’s trickier.

Look at the figure above, it is a chat interface, which can be entered through the home page, which means that it only appears when entering this interface, and the height of the content area in the middle of the interface needs to be set through calculation, while the input box is followed by it, rather than fixed positioning.

As a result, when the user enters the interface, the calculation height will not be calculated to him, resulting in the interface broken version.

The solution

After careful testing, I finally have two solutions. One is from the network, which is suitable for most cases. The original link

function(){  
  pushHistory();
  window.addEventListener("popstate".function(e) {
    WeixinJSBridge.invoke('closeWindow', {},function(res){}); },false);  
  function pushHistory() {  
    var state = {  
      title: "title".url: "#"  
     };  
    window.history.pushState(state, "title"."#"); }}Copy the code

In short, after the user enters, it actively inserts a routing record, which triggers ios to display the part of the bottom bar.

However, because the project is a single page application, the bottom bar will not be calculated without refreshing the screen.

Scheme two, combined with the project logic to deal with.

In order to reduce the operations of registered users and improve user experience, when entering the home page, it will judge whether users are currently registered in wechat. If they are not registered, they will directly go to the home page. If they are registered, they will log in silently and then go to the home page.

So there is an action to jump through window.location.href, which generates a routing record and also refreshes the page, but it still depends on the project logic.