ios10 safari 的坑！

| 導語 ios10 的safari，又給前端開發者挖坑了。。測試驗證此問題只出如今ios10 safari中。想早點知道結論的，能夠直接看最後一個結論~由於，解決過程不重要！

 

我的原創，未經容許，禁止轉載！

本文以項目爲基礎來談坑~

1、咱們的項目-H5導航

展現一下咱們的項目，注意圖中紅框區域，是有手勢滑動效果的區域(右圖是滑動到一半的效果，正常狀況下，滑動到這個位置鬆手的話，是會自動設置展開的)。咦，看起來很正常啊。對，如今是正常的

 

2、異常狀況

But，ios10 safari下，顯示以下驚人的效果：

 

3、解決過程：

第一步：借來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完美解決~

 

4、結論：

ios10 safari中，transform : 'translateY(0px)' 和 height要配合使用，纔會正常。。

 

我的原創，未經容許，禁止轉載！