在IOS11中position:fixed彈出框中的input出現光標錯位的問題

問題出現的背景：

在IOS11中position:fixed彈出框中的input出現光標錯位的問題

解決方案

一、設計交互方面最好不要讓彈窗中出現input輸入框；

二、前端處理此兼容性的方案思路：

1、判斷手機機型：Android or ios    ios11 or ios其他   

/*ver 是IOS的版本，如果是Android  ver就不是數組*/
var ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
if(Array.isArray(ver)){
     ver = parseInt(ver[1], 10);
}              

2、判斷彈出框出現的位置

a、點擊事件后將包含input的彈出框position:fixed改成position:absolute

b、計算彈出框的位置，如果clickbutton在屏幕的一半的上方，讓彈出框保持在屏幕的中上方，如果clickbutton在屏幕的一半的下方，讓彈出框保持在屏幕的中下方

/*

#get_award  是clickbutton
.tan_box  是彈出框

*/

$("#get_award").click(function () {
    var top = $(this).position().top;/*點擊按鈕距離屏幕頂部的相對*/
    var scrollTop = $(document).scrollTop();/*滾動條的位置*/
    var window_height = $(window).height();/*屏幕的可視高度*/
    var box_height = $(".tan_box").height();/*彈框的高度*/
    
    top1 = top - scrollTop;
    window_height = window_height/2;

    if(top1<window_height){
        if(top1<box_height/2){
            var top2 =top+100+box_height/2
        }else{
            var top2 = window_height+(top+100)/2+box_height/2
        }
        $(".tan_box").css("top", top2);
    }else{
        if(window_height-top1<box_height/2){
            var top2 = top-100-box_height/2
        }else{
            var top2 = (top+100)/2+box_height/2
        }

        $(".tan_box").css("top", top2);
    }

})

author by:hgq  tuantuan