| 導語 ios10 的safari，又給前端開發者挖坑了。。測試驗證此問題只出現在ios10 safari中。想早點知道結論的，可以直接看最后一個結論~因為，解決過程不重要！
個人原創，未經允許，禁止轉載！
本文以項目為基礎來談坑~
一、我們的項目-H5導航
展示一下我們的項目，注意圖中紅框區域，是有手勢滑動效果的區域(右圖是滑動到一半的效果，正常情況下，滑動到這個位置松手的話，是會自動設置展開的)。咦，看起來很正常啊。對，現在是正常的
二、異常情況
But，ios10 safari下，顯示如下驚人的效果
：
三、解決過程：
第一步：借來mac
，連上safari，調試。（如果不知道怎么調試，歡迎留言...）
第二步：打log。過程太多，省略。結果就是：邏輯完全正常啊！
第三步：第二步失敗了，那就用排除法吧，先把可能影響的因素（手勢邏輯-原生js寫的、禁用原生touchmove事件、transform動畫）一一排除。結果是：
注：為什么會考慮到transform動畫有影響呢？因為底圖遇到過這個問題，已經確定ios10 safari下是有transform的問題了~
| 影響因素 | 結論 |
| 原生手勢動畫 | 完全無影響，把代碼注釋之后，在ios10 safari中依然可以隨手勢滑動 |
| 禁用touchmove事件 | ios10 safari中，竟然還是能滑動。這不科學啊！ |
| transform動畫 | 刪掉css3動畫后，也是完全不能阻止dom跟隨手指滑動 |
第四步：第三步雖然失敗了，可是給我了一個啟發，難道是ios10 禁用touchmove是失效的？？所以，這時候，我就只寫了個禁用touchmove的demo。但是，在手機上一測試。。我的假設又錯了。。
第五步：一定有哪里不對。。突然之間，看到了這個滑動區域的css樣式，寫了height，就鬼使神差的取消了這個樣式，然后去滑動DOM，發現，竟然不錯位了。。OMG。。
第六步：改寫代碼。但是改寫過程中，發現使用translateY時，要寫高度才行。。問題終於找到了
bug修復前的代碼：
css：
.route-plan {
/*其他css*/
height: 100%;
}
javascript：
滑動過程中：
self.planDiv.style.webkitTransform = 'translateY(' + nowPageY + 'px)';
松開手指，最大化頁面時：
self.planDiv.style.webkitTransform = 'translateY(0px)';
松開手指，最小化頁面時：
// 跟此bug不相關的邏輯
bug修復后的代碼：
css：
.route-plan {
/*其他css*/
height: 149px;
}
javascript：
滑動過程中：
self.planDiv.style.height = '100%';
self.planDiv.style.webkitTransform = 'translateY(' + nowPageY + 'px)';
松開手指，最大化頁面時：
self.planDiv.style.height = '100%'; self.planDiv.style.webkitTransform = 'translateY(0px)';
松開手指，最小化頁面時：
self.planDiv.style.height = '149px'; self.planDiv.style.webkitTransform = 'translateY(0px)';
這3種情況，去掉任何一個的高度或者transform代碼，就會出現錯亂情況。。
至此，bug完美解決~
四、結論：
ios10 safari中，transform : 'translateY(0px)' 和 height要配合使用，才會正常。。
個人原創，未經允許，禁止轉載！