码迷,mamicode.com
首页 > 移动开发 > 详细

iOS下的 Fixed BUG

时间:2019-11-09 09:35:12      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:NPU   sele   bottom   图片   str   输入   field   content   class   

input 光标位置乱窜

固定式浮层内的输入框光标会发生偏移。即?fixed?定位的容器中输入框光标的位置显示不正确,没有正常地显示在输入框中,而是偏移到了输入框外面

技术图片

可触发条件

  • 页面body出现滚动条
  • 点击页面出现用fixed定位的弹框,弹框内有输入框,键盘弹起,页面发生滚动
  • 键盘弹起后手动滚动页面
通过调试工具发现键盘弹起视图向上调整了,但页面中元素所占的位置,其实并没有向上进行调整;输入框所占的位置还是原来键盘未弹起时的位置

input位置

技术图片

原因

  • ?软键盘唤起后,页面的 fixed 元素将失效,所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了
不仅限于?type=text?的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样地问题

解决思路

?iOS 下由于软键盘唤出后,页面 fixed 元素会失效,导致跟随页面一起滚动,倘若页面不会过长出现滚动,即便 fixed 元素失效,也无法跟随页面滚动,也就不会出现上面的问题了

.content {
    /* main绝对定位,进行内部滚动 */
    position: absolute;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性,可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}

<body>
    <div class="content">
       <!-- 内容在这里... -->
    </div>   
</body>
这样不管是弹框里的input还是input位置都能一劳永逸

相关资源

iOS下的 Fixed BUG

标签:NPU   sele   bottom   图片   str   输入   field   content   class   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/11824162.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!