jQueryMobile 页面导航上的过渡闪烁答案

【问题标题】：Transitions blink on jQueryMobile pages navigationjQueryMobile 页面导航上的过渡闪烁
【发布时间】：2011-10-06 08:35:23
【问题描述】：

我正在使用 PhoneGap + JqueryMobile 开发一个 HTML5 应用程序。我的问题是当我将用户重定向到另一个页面时（例如，当他点击链接或单击图像按钮时），我使用：

$.mobile.changePage("next-page.html");

问题是，当第二个页面加载时，在正确执行转换后，背景图像似乎“闪烁”-我看到背景，然后闪烁为白色，然后我又看到背景图像。

如果然后我进入主菜单并做同样的事情，“闪烁”问题就不会再发生，只是第一次打开网站。

知道为什么会这样吗？谢谢！

【问题讨论】：

你在哪个平台上看到这个？
我曾经问过同样的问题，我在 android 上没有回答
在 Android 上，这种闪烁（如果我理解描述正确的话）是 jQM 的一个已知问题。他们试图修复它，但到目前为止它没有工作（您可以在 jQM 博客上的这篇文章中阅读更多原因：jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released）
试用 JQM 的最新版本，目前是 v1.0 RC1
这里的解决方案：stackoverflow.com/questions/5953753/…

【解决方案1】：

我遇到了这个问题并用这个解决了：

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
}

【讨论】：

【解决方案2】：

我有同样的问题。我确实在该页面上获取了其他图像。几个答案显示了一个对我不起作用的 CSS 解决方案。相反，我使用了这种方法：Flickering when navigating between pages

根据 jQuery Mobile 主题，这是 Android 2.x 平台上的性能问题，所以我关闭了动画过渡（详情在上面的链接中）。

【讨论】：

【解决方案3】：

我认为您的问题是因为您在加载该页面上使用的所有图像之前到达新页面。

例如。假设您的页面“next-page.html”在按钮 (icon.png) 上使用了一个图标。你到达“next-page.html”，半秒后 icon.png 已经完成加载。当图标插入按钮时，屏幕会闪烁。

【讨论】：

我遇到了这个问题，但是对我来说屏幕不会闪烁，而是在加载图像时永久变白。页眉和页脚仍然可见，但页面的其余部分是白色的。一旦我触摸白页，它就会重绘里面的内容。关于如何解决这个问题的任何想法？
我应该提一下，这仅在我删除应用程序的缓存时发生，可能是由于图像在缓存内容之前加载，如果它们被缓存则隐藏

【解决方案4】：

这对我有用..

在 jqmobile js 文件中删除这个：

meta.attr( "content", disabledZoom );

...和：

meta.attr( "content", enabledZoom );

【讨论】：

【解决方案5】：

在我的情况下，这是由于页眉和页脚中的 data-position="fixed" 引起的，一旦我删除了这些，闪烁就消失了。

您可以使用简单的 css 类为其执行固定标头，并且它可以正常工作而不会弄乱过渡

【讨论】：

【解决方案6】：

今天我在使用 JQuery Mobile 1.4.3 时遇到了类似的问题，当我按下 F5 按钮或打开没有 ajax 的页面时会出现恼人的闪烁。一切都消失了，然后又出现了。

如果你有同样的问题，只需从 jquery.mobile.css 中删除这个 CSS：

/* Fouc */
.ui-mobile-rendering > * {
     visibility: hidden;
}

【讨论】：