当 textarea 聚焦时，iOS Safari css 位置固定

Question

我有一个足够长的简单 html 页面，用户需要滚动页面。 我希望在页面底部有一个带有 postion:fixed 的 div，并且在他里面有一个 textarea。 当用户单击文本区域并出现虚拟键盘时，我希望 div 位置保持在底部，而不是像这张图片那样在页面中间：

这是我使用的代码： https : //jsfiddle.net/capz19yg/

    .inputFixed{
        position:fixed;
        bottom:0px;
        right:0px;
        width:100%;
        height:50px;
        background-color:lightgrey;
    }

    textarea{
        height:40px;
        width:300px;
        position:absolute;
        bottom:5px;
        right:10px;
        padding:0px;
        margin:0px;
        border:none;
    }


<div class="inputFixed">
    <textarea></textarea>
</div>

有没有办法解决这个问题？ 也许一些javascript来进行更正？

Answer 1

也许问题与 iOS Mobile Safari 中的一个众所周知的错误有关，它发生在滚动/焦点跳跃和固定定位中。 许多人都写过它，许多人进行了黑客攻击或改变了他们的设计以部分解决这个问题。

正如我所参考的，看看：

• Stackoverflow：当固定元素获得焦点时，ios8 中的 Safari 正在滚动屏幕
• iOS 上的位置固定和滚动问题
• 移动 Safari (Whyyyy?!)