求助：移动端 position: fixed;定位软键盘弹出后的各种bug？？？？

HTML：

<header>
    头
</header>
<div class="main">
    内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分<br>内容部分
</div>
<footer>
    <input />
    <!--<textarea></textarea>-->
</footer>

css：

header,
footer{ color: #fff; text-align: center; line-height: 3rem; height: 3rem; width: 100%; position: fixed; z-index: 2;}
header{ background: red; top: 0;}
footer{ background: blue; bottom: 0;}
footer input{ height: 2rem; width: calc(100vw - 1rem); margin: 0.5rem;}
.main{ background: #c0c0c0; box-sizing: border-box; width: 100%; height: auto; overflow-y: scroll; padding-top: 3rem; padding-bottom: 3rem; position: absolute; left: 0; z-index: 1;}

网上看了好多帖子，有好多人有相关问题，但是貌似都没有解决，有大神帮忙解决下不？

我测试了移动端的微信、safari、chrome、Firefox、uc、opera

每款浏览器都会有bug