lay移动版 弹出层有input iOS有BUG


今天在新年福利项目中遇到关于layui的问题:

用的是这个js:
<script type="text/javascript" src="__PUBLIC__/js/layer3.0.3/mobile/layer.js"></script>

发现:IOS11钱即其他手机测试暂时没有出现问题,手机端在进行最后的测试时候发现 在进行最后弹出层的信息输入时,光标并不是在input框里面,错位了很多。上layer社区发现,这个问题也有提出来过,但是没有解决。

<img src="http://huangjuntu.vip/wp-content/uploads/2018/01/微信图片_20180111145134.jpg" alt="" width="800" height="536" class="alignnone size-full wp-image-1415" />

但是陆续的百度搜索后,发现几个关键词的存在,在自己页面进行测试后,暂时可以缓解下问题的存在,但是根还是没有解决。
关键词:position:fixed不兼容

其实判断哪个合适,还要看自己的代码构成,什么功能,如果单单是position:flex改了flex能解决的话,再好不过了,问题是后续引发的其他问题

就如我这个福利平台而言,页面整体在最后的兑换商品的页面上,进行了layer 的弹出层框架的操作。就是这个弹出层,用了position:fixed问题。

想法一:
假设:我将position:fixed换成了position:absolute,那么它之前在页面居中的问题就要用js控制下,即要解决关于filex固定定位的不兼容问题,其实IE6下本身也存在这个问题。
计算的话:该定位的对象的top
oDiv.style.top = scrollTop +document.documentElement.clientHeight-oDiv.offsetHeight+'px';
这种方法要看页面的复杂度构成了。选取最简单的。

想法二:
不变动position:fixed,不让页面有scroll操作,避免引发不兼容,某个点击事件后设置页面的宽高。再点击其他区域
(这个点击事件是layer.js代码里面控制)的时候,一切恢复正常。

想法三:
和想法二结合了下:不变动position:fixed,内容区域再点击兑换按钮的时候消失隐藏,不让页面有scroll操作(点击其他区域的时候内容区域消失:用focus了)。
(这个点击事件是layer.js代码里面控制的: function(a) { document.getElementById("content").style.display = "block";b.call(this, a)},红色区域是我新加的)的时候,一切恢复正常。
如果影响页面的话可以分为:ios和安卓的判断。(目前我的引入是这个)

写到这,有点感悟:网上问题并不是自己的,但是通过分析其他人的可以反过来看看自己的问题,产生灵感,我这篇就是的,下面会把赋予我灵感的网址贴出来下,便于以后再来回味。

想法四:
时隔几天,不经意中瞥到了自己的访问历史,点进去,发现关于一篇:苹果全系列fixed定位bug检测报告,引起了兴趣,内容主要是利用overflow:scroll;以及position:fixed;left:0;height:38px;line-height:38px;width:100%;但是根据这个办法,还是行不通的,但是对于在一个页面之中的话可以,所以说用哪一种方法,适合自己的就好。

希望还能访问:
http://bbs.csdn.net/topics/390861003
提供了:
在IPhone,IPad页面使用position: static;,如果用了jQuery,上面的文章提供了代码:

http://fly.layui.com/jie/22387/
http://blog.csdn.net/ly2983068126/article/details/49306427
http://blog.csdn.net/zhooson/article/details/75789659 作者为支付宝口碑开发人员
苹果全系列fixed定位bug检测报告


Carpe Diem and Do what I like