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 回答