1.1. 頁面滾動不流暢（2017-09-25）

現象：
網頁豎向滾動或橫向滾動不流暢。

解決方案：
為滾動元素添加css樣式：

  -webkit-overflow-scrolling: touch;

• 1

詳見MDN-webkit-overflow-scrolling

1.2. 橫向滾動時會上下跳動（2017-10-10）

現象：
橫向滾動區域，滑動時，會上下跳動。

解決方案：
為滾動元素添加css樣式：

  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

• 1
• 2
• 3

2. 點擊頁面的時候網頁閃爍（高亮）（2017-09-25）

現象：
點擊頁面輸入框的時候，網頁上半部分閃一下（高亮），體驗不好。

解決方案：

-webkit-tap-highlight-color: rgba(0,0,0,0);

• 1

3. position:absolute元素在頁面上看不到了（或absolute元素展示偏右）（2017-09-25）

現象：
某元素設置position:absolute，其他瀏覽器顯示正常，ios和Safari瀏覽器卻看不到該元素（或該元素在頁面上比較偏右）。

解決方案：
設置left:xxx;即可。

4. ios下，iframe頁面中的position:fixed定位錯誤（2017-09-19）

現象：
iOS，iframe中的fixed定位的元素並沒有顯示在屏幕的固定位置，而是會隨著頁面的滑動而滑動。
解決方案：
對滾動部分設置高度。

詳見該文章：ios下，iframe頁面中的position:fixed定位布局錯誤

5.1. ios下，click有300ms的延遲，click事件無響應（2017-09-25）

現象：
iframe中的網頁，點擊事件經常無響應。
解決方案：
使用fastclick插件。

5.2. fastclick插件對輸入框(contenteditable)不友善，光標無法移動（2017-09-25）

現象：
使用fastclick後，點擊某行文本，可以編輯，但是光標停留在輸入框最前面，無法移動光標位置。
解決方案：
為編輯元素添加needsclick樣式類。

5.3. 添加fastclick插件後，編輯屏幕下半部分的文本，網頁沒有自動向上移動（2017-09-25）

現象：
正常情況下，點擊下半部分的輸入框，在ios系統中，網頁會自動向上滑動，使輸入框暴露在屏幕的上訪，方便編輯，但是添加fastclick插件之後，網頁經常不再向上移動了。
解決方案：
暫未解決，求大神解答。
為編輯元素及所有後代元素添加needsclick類。（2017-10-10）

5.4. fastclick對編輯不友善（2017-09-25）

現象：
1. contenteditable的子元素仍有div標簽的情況下，光標經常不能自由移動。
2. 點擊contenteditable的元素，頁面經常上下震動。
3. 點擊編輯屏幕下半部分的文本時，頁面不能自動向上移動。

解決方案：
部分頁面不再使用fastclick，改為使用賀師俊大神的Zhi庫。
但仍未解決第三點的問題。
為編輯元素及所有後代元素添加needsclick類。（2017-10-10）

6. ios輸入漢字時出現空格（2017-09-11）

現象：
iOS在輸入漢語時，輸入多個漢字，在拼音的中間出現了空格。導致正則表達式判斷輸入不合法，用戶輸入被迫中止。
解決方案：
使用\s判斷空格，認為空格是合法的。
詳見該文章ios輸入漢字時出現空格

7. iOS輸入漢字時，最後選擇漢字並沒有觸發keyup(keydown)事件（2017-10-13）

現象：
input輸入框監聽用戶輸入，iOS用戶在輸入結束後，點擊候選漢字時，沒有觸發keyup(keydown)事件，導致最後的輸入無法處理。
解決方案：
使用input事件處理。input事件可以處理點擊候選漢字的操作。

input的簡單介紹MDN-oninput

致謝

1. fredshare-移動端前端常見bug及解決方案

聯系我

如果您有更好的解決方案，或者
您有任何疑問或本文侵犯了您的著作權，請聯系我。 mail to kylin

ios系統web（微信公眾號）開發遇到的問題及解決方案