在页面之间导航时闪烁答案

【问题标题】：Flickering when navigating between pages在页面之间导航时闪烁
【发布时间】：2011-08-22 15:55:48
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

@Decoy 是的，在 jquery mobile 上也对我有用，如果我有单独的页面 1.html、2.html、3.html
小心。这个“修复”破坏了我们在 Android 2.3 上的一些表单，这会阻止您在选择中选择选项。奇怪的是，Android 2.2 和 4.0 都很好，我们能找到的任何 iOS 版本都是如此。
这对我来说仍然适用于 iPad2/iOS 5.1、PhoneGap 1.4 和 jQuery Mobile 1.1.0-RC1。谢谢！

【解决方案2】：

有消息（2012-01-10）关于Android上的闪烁，见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 才能执行平滑过渡。

【讨论】：

我不得不在一个旧项目中做一些修复，这个技巧终于帮助了我，谢谢！
我也不得不评论一下，第二种方法（“更好的方法”）只是解决了所有问题！非常感谢！

【解决方案3】：

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

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

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

【讨论】：

这个解决方案对我有用。 Android 4.2.2、JQM 1.3.1 和 Phonegap 2.8
这是正确的解决方案...在 android 2.3（htc 渴望）和 4.2（三星表）上也适用于我。
添加“user-scalable=no”为我修复了它（Android 4.0.3 HTC Rezound）
适用于 Android 4+ 和 Phonegap 2.9
为我工作 Android 4.2、Jquery Mobile 1.4.2、Phonegap 3.4.1

【解决方案4】：

我在 iOS 上摆脱了闪烁！带有静态页眉和页脚。

我的 css 如下，页眉和页脚上没有 data-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%;
}

【讨论】：

【解决方案5】：

您的应用适用于 iPhone 还是 Android？

我已经在几个地方看到了这个帖子作为可能的 CSS 修复闪烁：

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

【讨论】：

我必须在哪里设置这个 CSS 修复？在我的 jquery.mobile-1.0a4.1.min.css?
我会单独留下 jquery css 文件。您没有使用自己的 CSS 文件吗？如果是这样，请将其添加到此处并定位 body 标记。喜欢：body { -webkit-backface-visibility: hidden;溢出：隐藏； }
还是不行。我试过这个，但闪烁仍然存在。这个 css 可以工作 -webkit-transform:translate3d(0,0,0) 但如果我输入表单，屏幕会上下移动。

【解决方案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

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

【讨论】：

【解决方案7】：

这是一个团队称之为“闪烁”的已知问题。他们已经公开表示他们将很快解决这个问题，并且已经分配了一个人。这是最近的一篇博客文章，其中提到了它：

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

【讨论】：

【解决方案8】：

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

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

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

一旦我纠正了重复的 ID 问题，一切都很好。

更新：堆栈溢出答案在这里解释更多关于 Jquery Mobile https://stackoverflow.com/a/8608474/271125 中的重复 ID 问题

【讨论】：

【解决方案9】：

使用 CSS 解决方案时

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

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

实际上，jQuery mobile v1.1.0 存在过渡问题。看看this 和this。

【讨论】：

【解决方案10】：

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

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

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

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

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

在 Android 上为我解决了。

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

链接内容：

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

从一个页面导航到另一个页面时，我看到白色闪烁（整个 Page) 短暂的片刻，这很奇怪。我在网上搜索，但现在 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/

【讨论】：