【转】前端bug积累_touchmove 在fixed容器内,位置获取错误

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()})触发