Question

当我在页面之间导航时，我的phonegap / jquery移动应用程序大部分时间都会闪烁。这是正常的还是有解决方案？

Answer 1

.ui-page {
    -webkit-backface-visibility: hidden;
}

这适用于我的phonegap / jquery手机/ Android手机。

Answer 2

有关于Android上闪烁的新闻（2012-01-10），请参阅http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/

引用：从更复杂的幻灯片，弹出和翻转过渡中排除性能不佳的Android 2.x平台，这样这些平台将回退到所有过渡的默认淡入淡出，以确保顺畅体验。

此线程的CSS解决方案对我不起作用（Android 2.x）。

我在所有链接中都使用data-transition="none"禁用了转化，一切正常。它也应该在页面级别设置时工作，但它对我不起作用（jQuery Mobile 1.0）。这是代码：

// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
    $("a").attr("data-transition", "none");
}

另一种（更好的）方法是为jQuery Mobile设置默认转换：

$(document).bind("mobileinit", function()
{
    if (navigator.userAgent.indexOf("Android") != -1)
    {
        $.mobile.defaultPageTransition = 'none';
        $.mobile.defaultDialogTransition = 'none';
    }
});

iPhone执行硬件加速转换，而其他平台按软件执行转换。这解释了为什么只有iPhone执行平滑过渡。

Answer 3

我尝试了其他建议，但没有一个适合我。我最后通过更改视口元标记来修复它，如下所示：

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

感谢http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

Answer 4

我摆脱了iOS上的闪烁！使用静态页眉和页脚。

我的css如下所示，页眉和页脚上没有数据位置=“固定”。

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

Answer 5

您的iPhone或Android应用程序？

我已经在一些地方看到过这个问题作为闪烁的CSS修复：

#YourApp {
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

Answer 6

FIY：上周我使用了CSS修复程序，继续前进时遇到了另一个问题。

我的应用有一个联系页面 - 按照此处提供的说明（http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html）非常直接。

然而，只要聚焦文本输入字段，页面就会“跳跃”（读取滚动）上下。有时它在输入文本时也会跳转。有点难以描述导致行为是随机的，但有一个关于它的讨论。停用闪烁修复的想法也来自那里。 https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354

仍在努力寻找“正确”的解决方案，但万一你没有键盘输入，我想它会正常工作！

Answer 7

这是团队称之为“眨眼”的已知问题。他们公开表示，他们很快就会解决这个问题并且已经指派了一个人。这是最近提到的一篇博客文章：

http://jquerymobile.com/blog/2011/05/06/jquery-mobile-team-update-week-of-may-2/

Answer 8

我遇到了同样的问题，这是由HTML中不同页面的重复ID引起的。

即使重复的ID位于不同的html页面中，JQuery Mobile也会将所有HTML文件编译为一个HTML文档，以便它可以执行页面转换。

这导致HTML无效并导致闪烁类似于您描述的内容。

一旦我纠正了重复的ID问题，所有这些都很有效。

更新：Stack Overflow在这里回答有关Jquery Mobile https://stackoverflow.com/a/8608474/271125中重复ID问题的更多信息

Answer 9

使用CSS解决方案时

.ui-page {
    -webkit-backface-visibility: hidden;
}

你可能会遇到其他问题，所以这不是一个好主意。

实际上，jQuery mobile v1.1.0存在转换问题。查看this和this。

Answer 10

在您的文档中，放置此代码：

<script src="disableTransition.js"></script>

要禁用闪烁转换，请在disableTransition.js文件中放置此代码

$(document).bind("mobileinit", function(){
 $.extend(  $.mobile , {
 defaultPageTransition: 'none' 
});

 $.mobile.defaultPageTransition = 'none';
 $.mobile.defaultDialogTransition = 'none';
});

在Android上解决了我的问题。

Answer 11

我有同样的问题，但更糟糕的是，在Phonegap中包装Jquery移动应用程序时。不仅页面转换闪烁，而且UI完全被破坏。我已经尝试了这里建议的大多数解决方案，但没有任何效果。然后我找到了Piotr Walczyszyn的this解决方案，一切都像梦一样！强烈建议任何使用Jquery mobile和Phonegap的人。

Answer 12

检查此链接，我有同样的问题，所以我记录了它。

链接内容：

我正在开发一个使用JQM的phoneGap android项目。我的   项目包含固定外部标题和外部面板。

在从一个页面导航到另一个页面时，我看到一个白色闪烁（整个   这是一个奇怪的短暂时刻。我现在在线搜索   JQM Core文件中的正确信息和大量代码更改。之后   长期研究，我想出来，希望每个人都知道它。

修正：更改

<meta name = "viewport" content="width=device-width, initial-scale=1" />

要

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

https://shariefmohatad.wordpress.com/2014/06/12/blinkingflickering-with-jqmobile-and-phonegap-aka-phonegap-on-android-2/

在页面之间导航时闪烁

12 个答案: