vue+element+iframe+ipad 项目遇到的一些bug

公司项目用vue+Element ui 开发 ， pc端一直开发的好好的 本来没什么问题 但是最近老板发话要兼容ipad 调bug调到 爆炸

1.嵌入iframe里面 ipad上页面划不动问题
页面卡顿原因大概是异步加载数据append到body的，ipad上body没形成滚动条 。解决办法：

html,body,#app{
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

2. 加入上面的样式之后，页面上所有的弹出层，点开之后都出现了遮罩层在上面 内容在下面的情况 然后 把#app去掉就可以了 原因：未知

html,body{
	 height: 100%;
	 overflow: auto;
	 -webkit-overflow-scrolling: touch;
}

3. -webkit-overflow-scrolling: touch; 这个属性 本来是ipad上用来滚动回弹 滑动起来更流畅设置的
   然后。。bug来了 页面过长的时候 点击某个操作后 整个页面会空白 然后我把这个属性去掉就可以了 但是滑动起来又没有了流畅的效果 在想解决办法

4.fixed定位在ipad上不起作用
5.iframe设置高度在ipad上不起作用 默认会把内容撑开
6.element自带的Popover 在pc端的hover在ipad上变成了click 产品要求点击其他地方消失 自己写了个指令

/**Popover  ipad兼容问题 */
Vue.directive('disnone', function (el) {
    el.addEventListener('click',function(event){
        event.stopPropagation();
        let list = document.getElementsByClassName('el-popover');
        for(let i = 0; i < list.length; i++){
            if(list[i].style.display == 'block'){
                list[i].style.display = 'none'
            }
        }
    })
});

7.如果元素设置了定位 加入一个弹出层设置了absoute定位 那么ipad上面input 元素聚焦的时候 滑动弹出层 光标也会随着滑动 解决办法：写个指令 让滑动的时候失焦

/**会员消费  滑动页面光标问题 */
Vue.directive('blur', function (el) {
    el.addEventListener('touchmove',function(event){
        let moneyInput = document.getElementById('moneyInput');
        let numberInput = document.getElementById('numberInput');
        if(moneyInput){
            moneyInput.blur()
        }
        if(numberInput){
            numberInput.blur;
        }
    })
});

8.element form表单 只有一个表单元素的时候 回车就会刷新页面，解决办法：
a. el-from 加上 @submit.native.prevent
b. 加入一个空的input <el-input style="display:none"></el-input>
原因：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。