jquery手机页面闪烁答案

【问题标题】：jquery mobile page flickerjquery手机页面闪烁
【发布时间】：2011-10-19 12:16:14
【问题描述】：

页面加载后和执行 listview('refresh') 页面闪烁。

所以在转换后会闪烁，$('#friendsList').append('#{data}').listview('refresh'); 后会闪烁

尝试添加

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

编辑

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

编辑 2

如果列表高度 > 屏幕高度页面闪烁。如果列表高度

【问题讨论】：

你的问题是......？
即使在页面加载时仍然闪烁
您使用的是哪个版本的 JQM？

标签： jquery-mobile rhomobile

【解决方案1】：

删除 data-position="fixed" 有效，但我必须保留这些属性。最后我通过更改视口元标记来修复：

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

这是我找到答案的链接： Flickering when navigating between pages

【讨论】：

【解决方案2】：

如果有人遇到与上述相同的问题，即在过渡期间页面闪烁：

page content height > screen height

这在某种程度上与 JQM 提供的页眉/页脚有关。要解决这个问题：

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

2) 包含以下 CSS 以提供相同的效果（但不闪烁）

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

【讨论】：

哇，我找这个修复已经好几个星期了。 -webkit-backface-visibility 更改本身并不是这样做的。我也需要位置固定的变化。谢谢。
@Amulya 我也做了同样的事情......虽然它确实消除了闪烁，但我现在面临这样一个事实，即菜单栏可以跳转页面上的位置（例如到中间）并且滚动不会不再那么顺利了：通常在滚动和释放页面时，页面会继续滚动一段时间然后停止，但现在我滚动，当我松开手指时，页面会立即停止滚动。