1. There is a conflict between Android's absolute positioning layout and native input.

If the absolute positioning element is at the bottom, when the keyboard pops up, the absolute positioning element will be at the top of the keyboard

terms of settlement:

1. Implemented with flex layout, a flex shrink is available
2. Or listen to the resize event to hide the element.

export function adapterPosition(selector) {
    if (/iphone/i.test(navigator.userAgent)) return
    const h = window.innerHeight;
    const dom = document.querySelector(selector)
    if (!dom) return
    const display = dom.style.display
    window.addEventListener('resize', () => {
        const height = window.innerHeight
        if (height < h) {
            dom.style.display = 'none'
        } else {
            dom.style.display = display
        }
    });
}

2. For low version browser, after setting flex:1 for input, the sibling element is squeezed out of the parent element space.

The specific reason remains to be found. Anyway, you need to add a display:block to the input.

<div class="item">
    <div class="name">Verification Code</div>
    <input class="jInput input" type="number" pattern="[0-9]*" placeholder="Please enter SMS verification code">
    <button class="btn jSendVcodeBtn">
        //Send verification code
    </button>
</div>

.item {
    margin-left: 15px;
    box-sizing: border-box;
    height: 60px;
    padding: 12px 15px 12px 0;
    overflow: hidden;
    background-color: #fff;
    color: #212121;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-bottom: 1px solid #f4f4f4;
    font-size: 16px;
}

.item .name {
    margin-right: 10px;
    min-width: 48px;
}

.item .input {
    display: block; // Need to add a display: block
    outline: 0 none;
    -webkit-box-flex: 1;
    flex: 1;
    font-size: 16px;
    padding: 0;
    border-width: 0;
    box-shadow: none;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

3.relative top failure

As for the reason why the top attribute of the relative element is invalid, the parent element has no height set, and the child element has no reference when using the percentage of top. In this case, the px value can be used.

4. Rolling penetration

Description: there are scenes that need mask, but the background can still scroll, that is, roll through. The solution is as follows. It is mainly to get the scroll element of the page and set it to fixed.

body.no-scroll {
  position: fixed;
  width: 100%;
}

UtilFn.ModalHelper = function (bodyCls) {
    var scrollTop;
    var scrollingElement = document.scrollingElement || document.body; // This writing method is compatible with webkit to obtain page scrolling elements
    return {
        afterOpen: function () {
            scrollTop = scrollingElement.scrollTop;
            document.body.classList.add(bodyCls);
            document.body.style.top = -scrollTop + 'px';
        },
        beforeClose: function () {
            document.body.classList.remove(bodyCls);
            scrollingElement.scrollTop = scrollTop;
        }
    };
}

5. The problem of pixel rounding in browser

Reference resources http://web.jobbole.com/84113/

The browser will round the decimal point, and the actual rendering is rounded, but the real occupied space is the original size, and the rounded part will affect the next value.