Use the micro-letter built-in browser click the dropdown box to appear page disorderly jump phenomenon (iphone), what to do _jquery

Related reading: Micro-credit payment how to implement the H5 page of the built-in browser payment

Scene Reappearance:

Just happy to pack things ready to work, the test department girl ran up to mention a bug: "Under the iphone, click the dropdown box appears page disorderly jump phenomenon, Andro does not have this problem." And the jump page is just the bottom of a few pages of the menu. "Because the project is more urgent, small knitting only obediently left to solve the problem." After testing again, the small series to troubleshoot the possible reasons (the official version and the test version of the code inconsistent, page HTML code confusion, CSS code error), but did not solve the problem. A simple select, how can there be a problem? baffled. (no source of problems has been found yet)

Find the source of the problem, only to see if there is a solution. After several debugging, the select action was captured and a solution was found. The principle is simple: use div to simulate a select.

Solution:

The idea is quite clear. There are two HTML structures in the page, one is the select code to write as usual (the first is hidden Display:none), the second is the mock div (first in the display state), when the click Div appears select Drop-down box, At the same time will read the option value to the simulated Div, its simulation core code can download visualselect.js

HTML code

<div class= "Visualselect" > firm </div> <select class= "Round" style= "Display:none"
; >
 <option value= "1" > National stock </option>
 <option value= "2" > firm </option>
 <option Value= "3" > Other </option>

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 the problem exists only in some iphone,android phones, there is no problem, so it is best to judge the model.

var agent = navigator.useragent;
if (Agent.indexof ("IPhone") >-1) {
 $ ("select"). Visualselect (); Invoke plug-in can
}

Ps:bootstrap scrolling monitoring is sometimes effective in browsers built into the iphone's micro-letters sometimes without

Bootstrap has written a affix additional navigation (the navigation bar on the left, the data on the right, the two columns), and scrolling on the Android phone's micro-mail browser is normal, but sometimes it can be tapped on the iphone's built-in browser.

Solution:

The reason for this is the Web page written in HTML5, and the iphone didn't respond in a timely fashion, preferably with jquery mobile.