logo标签列表

jQuery移动端页面切换时界面闪烁问题

javascriptcssjquery-uijquery-mobilemobile
7
我正在使用jQuery mobile 1.0。当我在iPhone上从一个页面移动到另一个页面时，第二个页面会闪烁，然后显示第一页，并完全移动到第二个页面。如何解决这个问题？提前致谢。
更新：您可以检查http://gugl.org/page1.html以获取示例。
4
你的问题无法通过这样的描述得到答案。你没有提供有关使用的浏览器或设备的信息，也没有提供使用的代码，也没有说明是否涉及其他JavaScript代码。 - RoToRa
是的，我在iPhone上进行了测试。后端代码是用JavaScript开发的。 - selladurai
2
请编辑您的问题，可能添加一些您正在使用的示例代码、错误等等。 - Phill Pafford
我遇到了完全相同的问题。在使用 AJAX 从一个页面转到另一个页面时，过渡完成后，先是快速显示上一页，然后才会再次显示新页面。 - Roman
2
为了让问题能够得到解答，它需要一个最小化测试案例（完整、简洁、代表性的样本代码）。请参考“编写完美问题”的指南获取更多建议。 - outis
显示剩余5条评论
6个回答
3

我用以下CSS代码解决了这个问题：

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
    overflow: visible;
}

关于此，我在我的博客中提到了更多。

2
请问以下内容是否有助于解决您的闪烁问题：
/* Remove flicker on Android / WebKit  */
.ui-page {
  -webkit-backface-visibility: hidden !important;
}

然而，这段代码需要警惕。虽然它可能解决闪烁问题，但通常会引入其他问题。

例如，我曾经卡在那里一周，试图弄清楚为什么我的谷歌地图不再按照我需要的方式工作，结果发现这段代码是问题的根源。我转而选择有针对性地将此规则定位到所有没有地图的页面上。

1
不行，这没什么帮助 :( 我在网上看到过这个解决方案。它解决了另一个问题，并且是针对Android而非iPhone的。作为一种解决方法，我选择禁用动画。但我仍在寻找解决方案。 - Roman
1
谢谢，这帮助了我解决了在iPad全屏模式下转换闪烁的问题。初始加载仍然有轻微的闪烁，但好多了。 - row1
0

这种行为可能由很多因素引起。

  • 长数据列表超过初始屏幕滚动。当屏幕滚动时，需要时间来渲染
  • 动态注入数据-同样需要时间来渲染
  • Android似乎到处都在闪烁。我们所做的一件事就是关闭具有android和默认页面的转换，并将它们设置为淡入淡出。实际上，这是JQM在下一个版本中采取的方法。
  • 使用非基于ajax的页面链接，然后返回到您的核心应用程序

这些只是可能导致您看到的行为的一些因素。至少这是解决一些问题的起点。

0
0

你可能只需要启用touchOverflowEnabled

示例：

<script>
$(document).bind("mobileinit", function() {
  $.support.touchOverflow = true;
  $.mobile.touchOverflowEnabled = true;
});
</script>

请注意，在jqm 1.1.0中将不再需要此操作。更多信息请参见这里。

0
1
嗯...不仅1.1-rc1将默认转换方式改为“淡入淡出”，而且无法恢复“滑动”效果。https://github.com/jquery/jquery-mobile/commit/5da1f11c4b90965484dd71a61867528c4718c593 - Roman
1
根据文档，您应该能够进行覆盖，否则请在提供的链接中更改。 :) - Cymbals
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接