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位置都能一劳永逸

iOS下的 Fixed BUG相关推荐

解决Web移动端Fixed布局的方案（防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js）
一些细节处理在细节处理上,其实还有很多要注意的,挑几个实际遇到比较大的问题来说一下: 有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollI ...
web移动端Fixed在Input获取焦点时ios下产生的BUG及处理
1.现象可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意 ...
移动端踩坑记---------ios下输入法遮挡input
移动端踩坑记---ios下输入法遮挡input 最近项目中遇到了一个比较严重移动端IOS下的Fixed兼容问题,网上也有很多人躺在这个问题上了,现在开始详细讨论一下这个问题. 现在我们先来看一 ...
ios下fixed回复框bug的解决方案
前几天做一个移动端的页面,要加个像微信那样附着在底部的回复框,按照做PC端网页的思路,首先是用fixed,在安卓上测了一下是好的,结果到同事的iphone6p上就不行了,点击输入框之后它总会跳到屏幕中 ...
h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰
做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台合作,用到iframe嵌入式应用,令很多Web前端开发的童鞋脑壳疼,相信大家也入了不少坑,且踩且珍惜吧,呵呵^_^.今天抽时间整理一 ...
IOS 下 -webkit-overflow-scrolling 引发的 bug
segmentfault 网站居然这么坑,写笔记的编辑器那么不友好,发不了图片,只能发文章了. 网上关于 IOS 下 -webkit-overflow-scrolling 的相关 bug 还挺多的,这 ...
iOS下border一半不显示问题
如图区域, 1.在做点击评价的时候,刚开始遇到下边选择标签左边border显示不全(仅在iOS下电脑和安卓显示完全正常), 解决方法:没有写宽高,使用padding将内容撑开,解决 2.又一次遇到问题 ...
ie6 7 8下的一些bug和解决办法
1:li边距"无故"增加任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑 ...
iOS下JS与OC互相调用（五）--UIWebView + WebViewJavascriptBridge
WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...

iOS下的 Fixed BUG

input 光标位置乱窜

可触发条件

input位置

原因

解决思路

相关资源

iOS下的 Fixed BUG相关推荐

最新文章

热门文章