当将CSS的overflow：scroll更改为overflow：hidden时，iOS出现闪烁错误。

Question

当将CSS的overflow：scroll更改为overflow：hidden时，iOS出现闪烁错误。

ioscsshtml

8

我正在使用PhoneGap构建一个应用程序，当我从屏幕底部滑出菜单时，我想禁用背景中div的滚动；

通过将overflow从scroll更改为hidden，它可以使菜单滑动时生效，但这会导致屏幕闪烁。

有人知道如何规避在更改overflow属性时防止div闪烁的任何技巧吗？

- TheNickyYo

也许你可以从 DOM 中彻底删除隐藏的内容，而不是设置 overflow hidden？听起来设备因为页面上有太多内容而感到吃力，所以我的第一步是让页面变小。 - Abhi Beckert

我也遇到了同样的问题，在iPad上将overflow属性从scroll更改为hidden时，整个div会“闪烁”。你找到解决方法了吗？ - iamalismith

在Blazor Server中，我能够消除闪烁的唯一方法是使用JavaScript而不是条件CSS来应用overflow hidden。 - undefined

3个回答

5

改变overflow的值似乎会使-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');
}

- GentleFish

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

- Aaron

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- daniel__ · Accepted Answer

闪烁问题与智能手机的GPU内存相关。由于内存有限（VRAM），如果元素过于复杂或大于内存，就会用尽内存。在安卓系统中，使用CyanogenMod rom可以通过屏幕上的颜色查看gpu处理情况。从绿色（低使用率）到红色（高gpu使用率）。Demo image。但我不知道是否存在类似IOS的工具。

这在应用的所有转换或使用GPU时都可见。

无论如何，您可以尝试删除/减少元素的复杂性，或者参考此处的解决方案：

选项1

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

Option 2 this:

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

Option 3 this:

.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'