我正在通过 phonegap 构建一个应用程序,当我从屏幕底部向上滑动菜单时,我想在后台禁用 div 的滚动;
通过将溢出从滚动更改为隐藏,为什么菜单滑动有效,但它会导致屏幕闪烁。
任何人都知道在溢出属性更改时阻止 div 闪烁的任何技巧?
闪烁错误与智能手机的 GPU 内存有关。内存是有限的(VRAM),如果元素太复杂或大于内存,就会耗尽。在带有 CyanogenMod rom 的 android 中,您可以在屏幕上查看带有颜色的 gpu 处理。从绿色(低使用率)到红色(高使用 gpu)。演示图像。但我不知道是否存在适用于 IOS 的类似工具。
这在应用程序的所有转换或使用 GPU 时都可见。
无论如何,您可以尝试删除/减少元素的复杂性,或者从这里开始:
选项1
<meta name="viewport" content="width=device-width, user-scalable=no" />
选项 2:
.ui-page {
-webkit-backface-visibility: hidden;
}
选项 3:
.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'
更改溢出的值似乎会使-webkit-overflow-scrolling值从touch更改为 auto,这会导致闪烁。
你可以在这篇文章中找到一些信息:http: //slytrunk.tumblr.com/post/33861403641/ios6-web-app-flickering-with。问题仍然存在于 iOS7 中,但仅就我所见,当您从触摸切换到自动时(不再从自动切换到触摸)。
在我的情况下,-webkit-backface-visibility: hidden、-webkit-transform: translate3d(0,0,0) 等都不起作用。
正如前面提到的文章中所建议的,一种解决方法可能是坚持使用-webkit-overflow-scrolling: auto,但代价是它提供了良好的用户体验。
如果您的网站负担得起,另一种方法是使用 javascript 锁定滚动:
function disableScroll () {
$(element).on('touchmove', function(event){
event.preventDefault();
});
},
function enableScroll () {
$(element).off('touchmove');
}
-webkit-backface-visibility: hidden;
如果页面上有多个滚动条,使用 which 的解决方案似乎会导致性能问题。旧 ipad 上的 Safari 达到 CPU 限制并导致浏览器崩溃。
通过在页面显示和隐藏事件中添加和删除具有违规样式的类,我找到了一个适用于我的 SPA(列表中最多可以有 100 个滑块)的解决方案。
.touchslide {
-webkit-overflow-scrolling:touch;
}
(使用jQuery风格的伪代码)当你离开页面时,移除类
selector.removeClass("touchslide");
然后在页面加载:
selector.addClass("touchslide");
selector.scrollLeft(0);
你需要在iOS上触发滚动事件,所以定位html对象并添加到scrollLeft,因为第一次滚动不会有惯性效果。