vue项目 Safari浏览器中点击input body会变高？

Question

app.vue 中

<template>
  <div id="app">
    <router-view class="main"/>
  </div>
</template>
<style>
body {
  margin: 0 ;
  padding: 0;
  background: blue; //body 蓝色
}
.main {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  background-color: red;//main 红色 宽高100%会盖住body的蓝色
}
</style>

helloworld.vue 中

<template>
  <div class="hello">
    <input type="text">
  </div>
</template>

正常显示是全都是红色的背景 没有蓝色 ，
当我点击input 后 body的蓝色就显示出来了 如图
没有任何东西撑开body 为什么body在input聚焦 键盘弹出后 高度会有变化？
这种情况该如何处理
如果写个footer定位在最下面 页面也有这种情况，真心难看.

Answer 1

在input focus时，给绝对定位的标签position改为static，取消focus时position改回原样。