When using WeChat's built-in browser to click on the drop-down box, the page jumps randomly (iphone). What should I do_jquery

Related reading: How WeChat payment implements H5 page payment with built-in browser

Scene reproduction:

Just when I was happily packing my things and getting ready to get off work, the girl from the testing department came over and mentioned a bug: "On the iPhone, clicking on the drop-down box will cause the page to jump randomly. Android does not have this problem. And the jump The pages happen to be just a few pages from the bottom menu. "Because the project is urgent, the editor can only stay and solve the problem. After testing again, the editor checked the possible causes one by one (the codes of the official version and the test version are inconsistent, the HTML code of the page is confusing, and the css code is wrong), but the problem was not solved. How could something go wrong with a simple selection? I’m puzzled. (The root of the problem has not been found so far)

We can’t find the source of the problem, so we can only see if there is a solution first. After many times of debugging and capturing the select action, I found a solution. The principle is simple: use div to simulate select.

Solution:

The idea is also relatively clear. There are two html structures in the page. One is the select code written as usual (display:none is in the hidden state at the beginning), and the other is the simulated div (displayed in the beginning). When the div is clicked, a select drop-down box appears, and at the same time the The read option value is given to the simulated div, and its simulation core code can be downloaded from VisualSelect.js

html code

<div class=”visualSelect” >商行</div>
<select class=”round” style=”display:none;”>
 <option value=”1”>国股</option>
 <option value=”2”>商行</option>
 <option value=”3”>其他</option>
</select> 

css code

.round { border-radius: 4px;}
.visualSelect {
 width: 100%;
 padding: .45rem .5rem .25rem .75rem;
 margin-bottom: .875rem;
 border: 1px solid #ddd;
 border-radius: 4px;
 color: #bbb;
} 

js code

Note: Since this problem only exists on some iPhones, there is no problem on Android phones, so it is best to determine the model.

var agent = navigator.userAgent;
if ( agent.indexOf(“iPhone”) > -1) {
 $(“select”).VisualSelect(); //调用插件即可
}

PS: Bootstrap scrolling monitoring sometimes works on the built-in browser of iPhone WeChat and sometimes does not

Bootstrap wrote an additional navigation for affix (navigation bar on the left, data on the right, divided into two columns). It is normal to scroll and listen on the built-in browser of WeChat on Android phones, but on the built-in browser of WeChat on iPhone Sometimes I can monitor and sometimes I can't. What's the reason?

Solution:

The reason for this is that the iPhone does not respond in time to web pages written in HTML5. It is best to use jQuery mobile.