当css溢出时IOS闪烁错误:滚动更改为溢出:隐藏

Question

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

通过将溢出从滚动更改为隐藏为什么该菜单滑动处于活动状态,但它会导致屏幕闪烁.

当溢出属性发生变化时,任何人都知道任何黑客可以阻止div闪烁吗？

Answer 1

闪烁错误与智能手机的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'

Answer 2

更改溢出值似乎使-webkit-overflow-scrolling值从触摸变为 自动,这会导致闪烁.

您可以在本文中找到一些信息: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');
}