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

前端之家收集整理的这篇文章主要介绍了当css溢出时IOS闪烁错误:滚动改为溢出:隐藏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在通过phonegap构建应用程序,当我从屏幕底部向上滑动菜单时,我想在后台禁用div的滚动;

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

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

解决方法

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

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

无论如何,您可以尝试删除/减少元素的复杂性,或者从here开始:

选项1

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

备选案文2 this

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

猜你在找的CSS相关文章