当css溢出时IOS闪烁错误：滚动改为溢出：隐藏 [英] IOS flicker bug when the css overflow:scroll is changed to overflow:hidden

问题描述

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

I'm building an app via phonegap and i want to disable the scroll of the div in the background when i swipe a menu up from the bottom of the screen;

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

By changing overflow from scroll to hidden why that menu swipe is active works, but it causes the screen to flicker.

任何人都知道任何黑客可以阻止div闪烁当溢出属性改变时？

Anyone know any hack arounds to stop a div flickering when the overflow propery is changed?

推荐答案

闪烁错误与智能手机的GPU内存有关。内存有限（VRAM），如果元素太复杂或比内存大，它将耗尽。在使用CyanogenMod rom的android中，您可以在屏幕上查看带有颜色的gpu处理。从绿色（低使用）到红色（更高的使用gpu）。 演示图片。但是我不知道IOS是否存在类似的工具。

The flicker bug is related with GPU memory of the smartphone. The memory is limited (VRAM), and if the elements are too complex or bigger than memory, it will be exhausted. In android with CyanogenMod rom you can view the gpu processing with colors in the screen. From green (low use) to red (higher use of gpu). Demo image. But I don't know if exists a similar tool for IOS.

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

This is visible in all transitions of the app or when it use GPU.

无论如何，您可以尝试删除/降低元素的复杂性，或者从此处：

Anyway you could try remove/reduce the complexity of your elements, or this from here:

选项1

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

选项2 this ：

.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%;
}

或者只是删除转换（如果问题出现在转换中）：

Or just remove the transitions (if the problem is in transitions):

选项4

'-webkit-transition': 'none !important',
'-moz-transition': 'none !important',
'-o-transition': 'none !important',
'-ms-transition': 'none !important',
'transition': 'none !important'

这篇关于当css溢出时IOS闪烁错误：滚动改为溢出：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！