Cordova 在页面之间导航时闪烁

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

您的应用程序是针对iPhone还是Android的

我已经在一些地方看到了这篇文章，作为对闪烁的CSS修复的可能：

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

---

这是团队称之为“闪烁”的已知问题。他们公开表示，他们将很快解决这一问题，并已指派专人负责。这里有一篇最近的博客文章提到了这一点：

---

这在phonegap/jquery mobile/Android手机上对我很有效。

FIY:我上周使用了CSS修复程序，在继续前进的过程中遇到了另一个问题

我的应用程序有一个联系人页面-按照此处提供的描述（）相当直接

然而，只要聚焦文本输入字段，页面就会上下“跳跃”（读Scrolling）。有时它在输入文本时也会跳转。这是有点难以描述，因为行为是相当随机的，但有一个关于它的讨论。停用闪烁修正的想法也来自于此。

仍然在努力寻找一个“合适”的解决方案，但如果你没有键盘输入，我想它会工作得很好

有关于Android上闪烁的新闻（2012-01-10），请参见

报价：从更复杂的幻灯片、弹出和翻转过渡中排除性能较差的平台，如Android 2.x，这样所有过渡都会回到默认淡入淡出状态，以确保平稳体验

这个线程的CSS解决方案对我来说不起作用（Android 2.x）

我在所有链接中使用

data transition=“none”

禁用了传输，一切正常。当设置为页面级别时，它也应该可以工作，但对我来说不起作用（jquerymobile1.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才能实现平滑过渡。

我在iOS上消除了闪烁！带有静态页眉和页脚

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

我的css如下，页眉和页脚上没有数据position=“fixed”

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

---

我也有同样的问题，这是由HTML中不同页面的重复ID造成的

即使重复的ID在不同的html页面中，JQuery Mobile也会将所有html文件编译成一个html文档，以便执行页面转换

这会导致无效的HTML，并导致类似于您描述的闪烁

一旦我纠正了重复ID的问题，所有的工作都很好

---

更新：Stack Overflow Answer在这里解释有关Jquery Mobile中使用CSS解决方案时重复ID问题的更多信息

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

您可能会遇到其他问题，因此这不是一个好主意

---

实际上，jQuery mobile v1.1.0在转换方面存在问题。查看并。

在文档的结尾处，放置以下代码：

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

---

在Android上为我解决了这个问题

我也遇到了同样的问题，但更糟糕的是，在Phonegap中包装Jquery移动应用程序时。不仅页面转换闪烁，而且用户界面完全被破坏。我已经尝试了这里建议的大多数解决方案，但没有任何效果。然后我找到了皮奥特·沃尔琴斯基的解决方案，一切都像梦一样顺利！强烈推荐同时使用Jquery mobile和Phonegap的用户。

我尝试了其他建议，但没有一个对我有效。 我通过如下更改视口元标记来修复它：

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

---

多亏了

检查这个链接，我也遇到了同样的问题，所以我记录了它

链接内容：

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

当从一个页面导航到另一个页面时，我看到一个白色闪烁（整个页面） （第页）短暂的片刻，这很奇怪。我在网上搜索，但现在 JQM核心文件上的正确信息和大量代码更改。过了一会儿 经过长时间的研究，我找到了答案，希望每个人都知道

修正：改变

到

---

我必须在哪里设置此css修复？在我的jquery.mobile-1.0a4.1.min.css中，我将不使用jquery css文件。你没有使用你自己的CSS文件吗？如果是这样，请将其添加到该位置，并将目标指向body标记。比如：body{-webkit backface可见性：hidden；overflow:hidden；}仍然不工作。我试过了，但闪烁不停。这个css可以工作-webkit转换：translate3d（0,0,0），但是如果我输入表单，屏幕会上下浮动。@Decoy yes在jquery mobile上也可以工作，如果我有单独的页面1.html，2.html，3.htmlBe请小心。这个“修复”破坏了我们在Android 2.3上的一些表单，这阻止了您在选择中选择选项。奇怪的是，Android 2.2和4.0都很好，我们可以找到的任何版本的iOS都很好。这对我来说仍然适用于iPad2/iOS 5.1、PhoneGap 1.4和jQuery Mobile 1.1.0-RC1。非常感谢。这个解决方案对我有效。安卓4.2.2、JQM 1.3.1和Phonegap 2.8这是正确的解决方案…我也可以在安卓2.3（htc desire）和4.2（samsung table）上使用。添加“用户可缩放=否”对我来说是固定的（安卓4.0.3 htc Rezound）适用于安卓4+，Phonegap 2.9适用于我的安卓4.2、Jquery Mobile 1.4.2，Phonegap 3.4.1我不得不在一个旧项目中进行一些修复，这个技巧最终帮助了我，谢谢！我也不得不评论，第二种方式（“更好的方式”）只是修复一切！！！谢谢！

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

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

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