【转】前端bug积累

Touchstart和Touchmove一起触发

问题:在某些特定低端安卓机上,如果同时使用了iscroll和默认的touchstart,touchmove和touchend事件,那么此时按住绑定触摸事件的dom不松开,touchstart和touchmove会一起触发!如果刚好是想做长按效果,这时touchstart下的定时弹框必然无法弹出

方法:在touchmove事件中对较touchstart和touchmove时的touches坐标,如果不相同即在touchmove事件中清除touchstart中的弹框定时器

Touchend不触发

问题:Android4.X版本中的某些机型会存在touchend和touchmove(连续)不触发的现象,体现在你滑动长列表的时候

方法:1.在touchstart事件中加入e.preventDefault();2.同时绑定touchcancel和touchend事件;3.定时器捕捉滚动列表的scrollTop值,如果值相等了,停止计时器,执行"touchend"操作

IOS下Fixed定位失效

问题:IOS环境下,如果页面体很长,又存在设置了fixed定位的元素,获取焦点后,此时fixed元素位置失效

方法:1.获取焦点时设置为相对定位,失去焦点时设置为绝对定位;2.给所有最外层容器都设置fixed定位,涉及滚动的部分设置overflow:scroll

IOS下onResize事件无效

问题:当你想监听视口变化的时候,确切的说你监听输入法键盘抬起和收回的状态时,onResize是无效的

方法:抬起键盘时,监听输入框的焦点事件;键盘收回时监听失去焦点事件

IOS下Fixed定位的输入框横屏旋转的Bug

问题:当你用fixed定位了输入框,此时点击获取焦点后,如果进行横屏旋转,保持焦点旋转回来,所有页面被波及,体现为全部滑不动了

方法:具体环境是微信中。我在其中一个页面使用捕捉横屏,然后马上触发失去焦点,然后横屏旋转回来,不会触发;但是在另一个页面中,此方法却无效。没完全理清原因,暂无解决方案

IOS下Web存储loaclStorage使用

问题:微信环境下,如果使用了loaclStorage存储,点击微信清理存储空间是清理不了这个存储数据

方法:removeItem(缓存名)

IOS下Html5离线缓存应用

问题:可能是我这边离线缓存操作也并不系统规范,因优化考虑启用了离线缓存,后面因其他原因要撤销掉它。然后不管是重新指定NETWORK目录,还是html根节点取消manifest清单文件和更新等方法,微信清理存储空间,离线缓存一直还在

方法:后来后台直接在服务器端暂时清空对应的‘离线名单’,然后手机端访问直接404,“顽疾”手机的离线缓存才终于消失了。如果有高手很清楚这块,希望不吝赐教!

IOS下Ajax请求数据

问题:IOS下从左至右回退到上一页,页面是通过ajax异步填充数据的,此操作回来数据依然没有变化,不管该页面数据实际上是否已经发生变化,存在于这种从左至右回退页面的情况中

方法:好像是纯粹刷新当前就可以请求到最新数据,不太记得了。反正大概是这么个情况,最后是在请求地址上加了随机后缀才保证数据返回的为实时最新的

onPopstate事件在Webkit中的Bug

问题:体现在微信中,一部分低端机会在侦听onpopstate事件后马上触发一次onpopstate事件,查阅资料发现这属于webkit内核的游览器对onpopstate事件支持的缺陷。(PS:但是我本人亲测了iphone6s在未升级9.3版本时,也能触发这个bug,IOS9.3和部分高端机高版本安卓系统不会有这种bug)

方法:1.设置定时器进行延迟,等页面载入完毕后再侦听该事件(网友提供,觉得不靠谱);2.直接针对webkit游览器做第一次触发的忽略;3.问题来了,经测试,很多高端机型缺陷已被修正,不会在第一次触发onpopstate事件,那么那些低端版本的又会触发,我该怎么办...求指教

IOS下Iscroll4滑动列表卡在中间

问题:当iscroll4渲染的列表滑动到底部后,如果此时滑动趋势过大偏上,列表会卡在中间,只有点击才会回位

方法:onScrollMove方法中控制滑动距离,保证在卡位bug的距离之内

IOS下Iscroll4列表横屏旋转后的bug

问题:当iscroll渲染的列表被旋转后,再旋转横屏回来后,偶尔会出现滑不动的现象

方法:旋转事件中及时启用refresh()方法重置

IOS下Iscroll4列表横屏旋转后的bug2

问题:当初次从微信公众号里面点击进入页面,如果此时刚好恰逢横屏模式,页面横屏初次显示,然后竖屏回来,iscroll列表会偏上,前提是列表的内容体上下还有刷新元素div模块(上拉加载,下拉刷新部件)

方法:初始化refresh()刷新,横屏事件回调中继续refresh()刷新+scrollTo()方法重置位置。首次修改时,我确实是验证通过了,后来不知道什么原因(多人协作),又提出了这个问题,此方法好像没用了,因为这种点击公众号+横屏进入页面的情况实属少见,暂时没深究了。

IOS下Iscroll4列表滑动操作的bug

问题:当滑动iscroll列表的时候,如果手指紧贴着列表上下频繁小幅度滑动,然后松开,有很大的几率会让列表直接飞到初始0的位置,然后再滑便无法滑动了

方法:onScrollEnd方法中进行refresh()刷新,及时保证重置列表体

IOS下iscroll4列表滑动容易误点跳转

问题:在应用iscroll4的列表页面滑动时,如果列表项绑定了click事件,滑动的过程中很容易误点(没去验证非iscroll4列表的情况)

方法:对较touchstart和touchend中的changedTouches.clientY坐标值,如果相等才符合click点击条件

IOS输入框值获取异常

问题:在做输入框搜索匹配的时候,同时绑定了(keyup/change)和click事件,输入内容后,obj[type]=$(this).val()进行搜索字符存值,此时点击搜索按钮click进行搜索,发现ajax过去的obj[type]值是错误的,比如:"你"被变成了"ng"字符,最后发现是(keyup/change)事件的存值错误

方法:搜索click的时候再进行obj[type]=$(‘footer input’).val()取一遍值

placeholder设置的文字偏上

问题:Android4.x部分机型下,通过placeholder设置的文字向上偏移的很厉害

方法:line-height:normal

-webkit-filter: grayscale(100%) 在retina下的模糊问题

问题:对页面应用网站变毁效果,会出现模糊问题

方法:-webkit-filter: grayscale(100%);

css3-translateY移动的抖动问题

问题:当应用单位为百分比的时候,抖动明显

方法:将单位改成px

企业微信端无法触发IOS自动播放

问题:IOS在微信中无法播放音乐,通常会通过微信私有接口“WeixinJSBridgeReady”事件去触发,但是企业微信无效

方法:通过WeixinJSBridge.invoke('showItemMenus',{},function(res){音乐实例.play()})触发



作者:戡玉
链接:https://www.jianshu.com/p/0c04e3d4055f
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


您可能感兴趣的

  1. 详解1000+项目数据分析出来的10大JavaScript错误
  2. 提示“用户名或密码不正确”很糟糕
  3. Debug前端HTML/CSS


猜你喜欢

转载自blog.csdn.net/qq_40126542/article/details/80081356