IOS的​​閃爍錯誤，當CSS溢出：滾動更改爲溢出：隱藏

Question

我通過phonegap構建應用程序，我想禁用在後臺div的滾動，當我從底部向上滑動菜單屏幕;

通過更改從滾動到隱藏的溢出爲什麼該菜單刷卡處於活動狀態，但會導致屏幕閃爍。

任何人都知道任何破解當溢出propery更改時停止div閃爍？

Answer 1

閃爍錯誤與智能手機的GPU內存有關。內存是有限的（VRAM），如果元素太複雜或大於內存，它將被耗盡。在使用CyanogenMod rom的android中，您可以使用屏幕上的顏色查看GPU處理。從綠色（低使用）到紅色（使用更高的GPU）。 Demo image。但我不知道IOS是否存在類似的工具。

這在應用程序的所有轉換或使用GPU時都可見。

反正你可以嘗試刪除/減少你的元素從here的複雜性，或者這樣：

選項1

<meta name="viewport" content="width=device-width, user-scalable=no" /> 

選項2this：

.ui-page { 
    -webkit-backface-visibility: hidden; 
} 

作品號：重刑3this：

.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], 
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active { 
     overflow: hidden; 
     -webkit-backface-visibility: hidden; 
} 

.ui-header { 
    position:fixed; 
    z-index:10; 
    top:0; 
    width:100%; 
    padding: 13px 0; 
    height: 15px; 
} 

.ui-content { 
    padding-top: 57px; 
    padding-bottom: 54px; 
    overflow: auto; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.ui-footer { 
    position:fixed; 
    z-index:10; 
    bottom:0; 
    width:100%; 
} 

或者只是刪除轉換（如果問題是過渡）：

選項4

'-webkit-transition': 'none !important', 
'-moz-transition': 'none !important', 
'-o-transition': 'none !important', 
'-ms-transition': 'none !important', 
'transition': 'none !important' 

Answer 2

改變溢出的價值似乎使-webkit溢出滾動值從改變改爲auto，這會導致閃爍。

你可以在這篇文章中找到一些信息：http://slytrunk.tumblr.com/post/33861403641/ios6-web-app-flickering-with。問題仍然存在於iOS7中，但僅限於我看到的，當您從觸摸切換到自動時（不再是自動觸摸）。

沒有-webkit-backface-visibility：hidden，-webkit-transform：translate3d（0,0,0）等在我的情況下工作。

正如前面提到的文章中提到的，一種解決方法可能是堅持使用-webkit溢出滾動：自動，代價是它提供了很好的用戶體驗。

另一個辦法是鎖定使用JavaScript滾動，如果你的網站能負擔得起：

function disableScroll() { 
    $(element).on('touchmove', function(event){ 
    event.preventDefault(); 
    }); 
}, 

function enableScroll() { 
    $(element).off('touchmove'); 
} 

Answer 3

使用-webkit-backface-visibility: hidden;其中工程解決方案，似乎會導致性能問題，如果你有一個頁面上的多個滾動條。較舊的ipad公司的Safari瀏覽器正在達到CPU限制並導致瀏覽器崩潰。

我發現了一個適用於我的SPA的解決方案（可以在列表中添加最多100個滑塊），方法是在頁面上添加和刪除隱藏類型的類，以隱藏事件。

.touchslide { 
    -webkit-overflow-scrolling:touch; 
} 

（使用jQuery風格的僞代碼），當您離開頁面，刪除然後在頁面加載的類

selector.removeClass("touchslide"); 

：

selector.addClass("touchslide"); 
    selector.scrollLeft(0); 

您需要觸發滾動事件上iOS，因此定位html對象並添加到scrollLeft，因爲第一個滾動不會產生慣性效果。