jQuery移动页面闪烁 [英] jquery mobile page flicker

问题描述

页面加载后以及执行listview('refresh')时，页面闪烁.

after page load and when doing listview('refresh') the page flickers.

所以过渡后会出现闪烁，而$('#friendsList').append('#{data}').listview('refresh');之后我会闪烁

So after transition get a flicker and after $('#friendsList').append('#{data}').listview('refresh'); I get a flicker

尝试添加

<style>
/*** for jquerymobile page flicker that was happending ***/
 .ui-page {
    -webkit-backface-visibility: hidden;
 }  
</style>

编辑

刷新列表视图时，我了解列表视图内部的闪烁，但是是否会使整个页面闪烁?

EDIT

When refreshing the listview, I understand the flicker inside the listview but is it suppose to make the entire page flicker to?

如果列表高度为>屏幕高度，则页面闪烁.如果列表高度<屏幕高度页面不会闪烁.

If list height is > screen height page flickers. If list height < screen height page doesn't flicker.

推荐答案

如果有人遇到与上述相同的问题，则在以下情况下页面会在过渡期间闪烁:

If anyone is having the same issue as above where page flickers during transition when:

page content height > screen height

这在某种程度上与JQM提供的页眉/页脚有关.要解决此问题:

This is somehow related to the header/footer provided by JQM. To fix this:

1)从页眉/页脚中删除所有data-position="fixed".

1) Remove all data-position="fixed" from the headers/footers.

2)包括以下CSS以提供相同的效果(但不会闪烁)

2) Include the following CSS to provide the same effect (but without flickering)

.ui-page {
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
.ui-header {
    position:fixed;
    z-index:10;
    top:0;
    width:100%;
    height: 40px;
}
.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%;
}

这篇关于jQuery移动页面闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！