修复了键盘进入屏幕时移动浏览器中的元素问题答案

【问题标题】：Fixed element problem in mobile browser when keyboard get on screen修复了键盘进入屏幕时移动浏览器中的元素问题
【发布时间】：2018-09-25 07:25:23
【问题描述】：

我不知道该怎么形容这就是我录制视频的原因。屏幕上有固定的黄色文字。当键盘不在屏幕上时，固定文本行为是正常的。当我专注于屏幕并且键盘变得可见时，固定项目开始随着页面滚动。是bug还是什么？有什么解决办法吗？

视频：https://www.youtube.com/watch?v=Nq60jH4XiJs

https://codepen.io/anon/pen/rZgKqG

 <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=1" />
    </head>
      <textarea style="min-height: 50px;"></textarea>
      <div style="height: 1000px; background-color: green">
                    div - height 1000px
      </div>
      <div style="position: fixed; top: 10px; right: 10px; background-color: yellow;">
                    Some Fixed Text
      </div>
    </html>

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

不幸的是，当在页面上使用固定元素时，这是 Safari 在 iOS 中的预期行为。

看看这篇文章提供了一个可能的解决方案： https://medium.com/@im_rahul/safari-and-position-fixed-978122be5f29

【讨论】：