【转】前端bug积累

心已赠人 2022-05-26 04:58 279阅读 0赞

#### 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错误][1000_10_JavaScript]  
    
2.  [提示“用户名或密码不正确”很糟糕][Link 1]  
    
3.  [Debug前端HTML/CSS][Debug_HTML_CSS]

[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/
[Link 1]: https://blog.fundebug.com/2018/01/08/username-or-password-is-incorrect-is-bullshit/
[Debug_HTML_CSS]: https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/