css overflow:scroll改为overflow:hidden时IOS闪烁bug

Posted 2023-03-06

【中文标题】css overflow:scroll改为overflow:hidden时IOS闪烁bug

【英文标题】：IOS flicker bug when the css overflow:scroll is changed to overflow:hidden

【发布时间】：2013-07-18 19:22:07

【问题描述】：

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

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

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

【问题讨论】：

不设置溢出隐藏，也许您可​​以从 DOM 中完全删除隐藏的内容？听起来设备正在挣扎，因为页面上的内容太多，所以我的第一个方法是缩小页面。

我也有同样的问题，将溢出属性从滚动更改为隐藏 ipad 上的整个 div“闪烁”。你找到解决办法了吗？

【参考方案1】：

闪烁问题与智能手机的 GPU 内存有关。内存是有限的（VRAM），如果元素太复杂或大于内存，就会耗尽。在带有 CyanogenMod rom 的 android 中，您可以在屏幕上查看带有颜色的 gpu 处理。从绿色（低使用率）到红色（高使用 gpu）。 Demo image。但是不知道有没有类似的ios工具。

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

无论如何，您都可以尝试删除/降低元素的复杂性，或者来自here：

选项 1

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

选项2this：

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

选项 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'

【讨论】：

您可以在 iOS 模拟器中调试 GPU 问题，但不能在设备本身上调试。它位于“Xcode -> 打开开发者工具 -> 更多开发者工具...”下并搜索“图形”（该网站现在已关闭，所以我不确定名称到底是什么）。您也可以在 Instruments 工具中运行它，它会告诉您在应用程序生命周期的每一微秒内您使用了多少字节的 VRAM。不过，我不确定如何让电话间隙应用程序在 Instruments 中运行。

【参考方案2】：

更改溢出的值似乎会使 -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');

【参考方案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，因为第一次滚动不会有惯性效果。