先说下业务逻辑:登陆页面,滑块验证,手机号码输入完成之后,会有一个滑块验证,验证正确则会收到短信验证码。这就是这个登陆页面的基本逻辑。spa
出现bug的地方就是在IOS上滑块没法拖动,通过检测发现是在6plus上有这个问题。
1.弹窗是经过fixed定位在页面上的。
2.当表单激活的时候,因为手机自带的输入法弹起形成页面向上滚动,会隐藏页面顶部一部分。
此时形成页面顶部缺失一部分,因此fixed定位的实际top距离也跟着改变,形成拖拽的滑块位置偏移到文字位置。相似于第四张图的效果,黄色部分缺失。code
解决方法:经过input的focus事件改变body的scrollTop值为0。事件
$('input').focus(function () { console.log($('body').scrollTop()) document.documentElement.scrollTop=0; document.body.scrollTop=0; })
记录一下开发终于到的问题。图片