8

我正在通过 phonegap 构建一个应用程序,当我从屏幕底部向上滑动菜单时,我想在后台禁用 div 的滚动;

通过将溢出从滚动更改为隐藏,为什么菜单滑动有效,但它会导致屏幕闪烁。

任何人都知道在溢出属性更改时阻止 div 闪烁的任何技巧?

4

3 回答 3

6

闪烁错误与智能手机的 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'
于 2013-07-19T13:39:34.823 回答
5

更改溢出的值似乎会使-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');
}
于 2014-07-23T09:47:33.933 回答
3

-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,因为第一次滚动不会有惯性效果。

于 2014-08-15T11:37:21.383 回答