iOS下的 Fixed BUG
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位置都能一劳永逸
相关资源
- https://bugs.webkit.org/show_... (Wrong caret position for input field inside a fixed position parent on iOS 11 )
iOS下的 Fixed BUG的更多相关文章
- iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...
- web移动端Fixed在Input获取焦点时ios下产生的BUG及处理
1.现象 可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...
- 记一次事件委托在 ios 下的兼容 bug
项目中碰到的兼容类 bug,记录一二. 页面上有几个同类型的控件,点击它们会触发一些事件,很显然,事件委托优于批量绑定.为了图方便,我将 click 事件绑定到了 document.body 上(绑定 ...
- new Date在ios下的兼容bug
今天发现在ios下new Date("2019-03-06").getTime()返回NaN 原因是ios下不支持“-”必须用"/" 记录备忘 var d = ...
- 移动端 常见问题整理 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
使用iScroll时,input等不能输入内容的解决方法 <script> function allowFormsInIscroll(){ [].slice.call(document.q ...
- 偏前端 - ios下position:fixed失效的问题解决
如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:f ...
- 移动端底部fixed固定定位输入框ios下不兼容
简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...
- ios下fixed回复框bug的解决方案
前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到朋友的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...
- ios下,微信小程序scrollview组件中的fixed元素抖得和帕金森病人一样
问题现象 这个问题是最近在优化小程序代码时发现的. 在ios环境下,微信小程序的scrollview组件包裹着一个position:fixed的view. 当在scrollview组件上滑动时,这个v ...
随机推荐
- springboot+solr基本使用
接着上一篇的搭建 首先需要的pom节点有 <!-- https://mvnrepository.com/artifact/org.springframework.data/spring-data ...
- Linux_打包文件
将多个文件打包成一个大文件,用tar命令 tar是将多个文件前后连接在一起,tar并不对文件进行压缩 tar -cf 要创建的打包文件名(最后加上.tar) 要打包的文件/列表 c代表创 ...
- day32-socketserver
#socketserver 是在socket基础上进行了封装,它让server可以实时跟多个client进行通信. #thread线程:一个程序有一个线程,一个线程是调度cpu的最小单位.程序运行才产 ...
- linux下java调用C
linux下java调用C 分类: linux2012-05-22 09:12 1529人阅读 评论(0) 收藏 举报 javalinuxmakefilegccclasscommand 下面是在ubu ...
- [LC] 203. Remove Linked List Elements
Remove all elements from a linked list of integers that have value val. Example: Input: 1->2-> ...
- confessed to doing|conform|confined|entitle|
to admit that you have done something wrong or something that you feel guilty or bad about 坦白:供认,招认: ...
- [LC] 24. Swap Nodes in Pairs
Given a linked list, swap every two adjacent nodes and return its head. You may not modify the value ...
- Excel中带字母的数字序列自增实现方法
示例: 在A1单元格输入以下公式,然后向下填充公式 =".mr"&ROW()&" {margin-right: "&ROW()& ...
- Ubuntu12.10下安装Python3
设置Python3.2为默认版本 ubuntu12.10下默认安装了Python2.7和Python3.2.3,并且设置了Python2.7为默认的版本,因此如果讨厌麻烦的话,可以直接将Python3 ...
- nodejs+vue.js+webpack
前端: nodejs+vue.js+webpack 后台:ssb(Spring+SpringMVC + mybatis-plus) 开发工具:idea 一.前提 1.安装nodejs 2.安装完nod ...