[Turn] Front-end bug accumulation

Touchstart and Touchmove fire together

Problem: On some specific low-end Android devices, if the iscroll and the default touchstart, touchmove and touchend events are used at the same time, then the dom bound to the touch event will not be released at this time, and the touchstart and touchmove will be triggered together! If you just want to do a long-press effect, then the timing pop-up box under touchstart must not pop up

Method: Compare the touches coordinates of touchstart and touchmove in the touchmove event. If they are different, clear the pop-up timer in touchstart in the touchmove event.

Touchend does not fire

Problem : touchend and touchmove (continuously) do not trigger on some models in the Android 4.X version, which is reflected when you slide a long list

Methods: 1. Add e.preventDefault() to the touchstart event; 2. Bind the touchcancel and touchend events at the same time; 3. The timer captures the scrollTop value of the scroll list, if the values are equal, stop the timer and execute the "touchend" operation

Fixed positioning fails under IOS

Problem: In the IOS environment, if the page body is very long and there is an element with fixed positioning set, after getting the focus, the fixed element position is invalid at this time

Methods: 1. Set relative positioning when the focus is obtained, and absolute positioning when losing focus; 2. Set fixed positioning for all outermost containers, and set overflow:scroll for the scrolling part

The onResize event is invalid under IOS

Problem: when you want to monitor viewport changes, specifically when you monitor the state of the input method keyboard being lifted and retracted, onResize is invalid

Method: When the keyboard is raised, listen for the focus event of the input box; when the keyboard is retracted, listen for the lost focus event

The bug that the input box of Fixed positioning is rotated horizontally under IOS

Problem: When you use fixed to locate the input box, after clicking to get the focus, if you rotate the horizontal screen and keep the focus rotated back, all pages will be affected, which means that all the pages cannot be slid.

Method: The specific environment is in WeChat. I use capture landscape on one of the pages, and then immediately trigger the loss of focus, and then rotate back to landscape, it won't trigger; but in another page, this method doesn't work. The reason is not fully clarified, and there is no solution yet

Use of web storage loaclStorage under IOS

Problem: In the WeChat environment, if the loaclStorage storage is used, clicking WeChat to clear the storage space cannot clear the stored data

Method: removeItem(cache name)

Html5 offline cache application under IOS

Question: It may be that the offline cache operation on my side is not systematically standardized. The offline cache is enabled due to optimization considerations, and it will be canceled later for other reasons. Then, whether it is to re-designate the NETWORK directory, or to cancel the manifest file and update the html root node, WeChat cleans up the storage space, and the offline cache is still there.

Method: Later, the corresponding 'offline list' was temporarily cleared on the server side directly in the background, and then the mobile phone side accessed 404 directly, and the offline cache of the "stubborn" mobile phone finally disappeared. If there is a master who knows this very well, I hope you can enlighten me!

Ajax request data under IOS

Problem: In IOS, the page goes back to the previous page from left to right. The page is filled with data asynchronously through ajax. The data is still unchanged after this operation, no matter whether the data of the page has actually changed. In the case of right back to the page

Method: It seems that the latest data can be requested by simply refreshing the current, I don't remember much. Anyway, this is probably the case. Finally, a random suffix is added to the request address to ensure that the data returned is the latest in real time.

Bug in onPopstate event in Webkit

Problem: Reflected in WeChat, some low-end opportunities trigger an onpopstate event immediately after listening to the onpopstate event. According to the information, it is found that this belongs to the defect that the browser of the webkit kernel supports the onpopstate event. (PS: But I personally tested that iphone6s can trigger this bug when it has not been upgraded to version 9.3. IOS9.3 and some high-end Android systems will not have this bug)

Methods: 1. Set the timer to delay, and then listen to the event after the page is loaded (provided by netizens, I think it is unreliable); 2. Directly ignore the first trigger for the webkit browser; 3. The problem comes After testing, many high-end models have been corrected, and the onpopstate event will not be triggered for the first time, then those low-end versions will be triggered again, what should I do... Please advise

Iscroll4 sliding list stuck in the middle under IOS

Problem: When the list rendered by iscroll4 slides to the bottom, if the sliding trend is too large at this time, the list will be stuck in the middle, and only click will return to position

Method: Control the sliding distance in the onScrollMove method to ensure that it is within the distance of the card position bug

The bug after the horizontal screen rotation of the Iscroll4 list under IOS

Problem: When the list rendered by iscroll is rotated, and then the horizontal screen is rotated back, the phenomenon of sliding occasionally occurs

Method: Enable refresh() method reset in time in rotation event

Bug2 after the horizontal screen rotation of the Iscroll4 list under IOS

Problem: When you click to enter the page from the WeChat official account for the first time, if it happens to be in landscape mode, the page is displayed in landscape for the first time, and then comes back in portrait, the iscroll list will be on the upper side, provided that the content of the list is refreshed up and down Element div module (pull-up loading, pull-down refresh widget)

Method: Initialize refresh() to refresh, continue refresh() to refresh + scrollTo() method to reset the position in the horizontal screen event callback. When I modified it for the first time, I did pass the verification. Later, I didn’t know the reason (multi-person collaboration), and I asked this question again. This method seems to be useless, because the situation of clicking on the public number + horizontal screen to enter the page is true Rare, not investigated for the time being.

Bug in Iscroll4 list sliding operation under IOS

Problem: When sliding the iscroll list, if your finger is close to the list and swipes up and down frequently and in small increments, and then releases it, there is a high chance that the list will fly directly to the initial 0 position, and then you will not be able to swipe again.

Method: Refresh() is performed in the onScrollEnd method to ensure that the list body is reset in time

The scroll4 list under IOS is easy to miss the jump

Problem: When the list page of iscroll4 is slid, if the list item is bound with a click event, it is easy to miss the time during the sliding process (without verifying the case of non-iscroll4 list)

Method: Compare the coordinate values of changedTouches.clientY in touchstart and touchend. If they are equal, they will meet the click condition.

IOS input box value acquisition exception

Problem: When searching and matching the input box, the (keyup/change) and click events are bound at the same time. After entering the content, obj[type]=$(this).val() searches for the character storage value, and clicks at this time Click the search button to search, and found that the past obj[type] value of ajax was wrong, for example: "you" was changed to "ng" character, and finally found that the stored value of the (keyup/change) event was wrong

Method: When searching for click, perform obj[type]=$('footer input').val() to get the value again

The text set by placeholder is on the upper side

Problem: Under some Android 4.x models, the text set by the placeholder is very shifted upwards

Method: line-height:normal

-webkit-filter: grayscale(100%) blur problem under retina

Problem: Applying the website ruin effect to the page will cause blurring problems

Method: -webkit-filter: grayscale(100%);

The jitter problem of css3-translateY movement

Problem: When the application unit is a percentage, the jitter is obvious

Method: Change the unit to px

Enterprise WeChat cannot trigger IOS autoplay

Problem: IOS cannot play music in WeChat, it is usually triggered through WeChat private interface "WeixinJSBridgeReady" event, but enterprise WeChat is invalid

Method: Triggered by WeixinJSBridge.invoke('showItemMenus',{},function(res){music instance.play()})

Author: Kan Yu
Link : https://www.jianshu.com/p/0c04e3d4055f
The copyright belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.