jQuery Mobile在iPad页面转换时闪烁

我有一个使用jQuery Mobile构建的web应用程序，在iPad上的Safari中使用它时效果很好。但是，当您将其添加到主屏幕以将其作为独立应用程序使用时（浏览器导航被删除），则页面转换在每次页面转换后都会快速“闪烁”

我在谷歌上搜索了一下，发现眨眼很久以前就被认为是一个bug，现在应该被修复了。它似乎在Safari中，但不是独立于主屏幕。有人知道是什么导致了它，以及如何修复它吗

这与导航栏不在这一事实有什么关系吗？它在iPhone上可以独立工作，但它只在iPad上出现

---

即使有人能告诉我这是一个已知的bug（不是已经修复的旧bug，在Safari模式下它也会闪烁），或者有人知道这一点（在jQuery论坛上也没有人回答我的问题），我也会接受这个答案。但是，如果有人真的能解决这个问题，我当然会很高兴的！

修订版：应该注意的是，下面的讨论随着iOS 5.0的发布而有所缓解。对于任何没有升级的人来说，这可能是一个局部影响因素，但如果你运行的是5.0，Nitro永远都存在

--原始答案-- 苹果在Safari浏览器中引入了Nitro javascript引擎。然而，他们只在浏览器上安装了它，而没有在UIWebView中安装（这是从主屏幕运行或嵌入PhoneGap等应用程序时得到的）

有人猜测这一性能提升是否是故意忽略的

---

因此，如果它看起来确实运行缓慢…那是因为它确实是。它没有使用Nitro引擎。

这是一个已知的错误。请参阅中的文章

Rolf van der Vluten注意到：

• 在一页中多次使用同一#id时，可能会出现闪烁， 当您使用单页模板方法时，这是不可能的 确保不要多次使用#id
• 我不知道为什么会这样，但我发现当我的第一页 一个元素在默认情况下会出现闪烁，这是 修正加入：
  输入{ 大纲：无； }

---

我也有同样的问题
提到了一些对我有用的东西

<style>
/*** patch for jquerymobile page flicker that was happending ***/
    .ui-page {
        -webkit-backface-visibility: hidden;
    } 
</style>

/***jquerymobile页面出现闪烁的补丁***/
.ui页面{
-webkit背面可见性：隐藏；
} 

我仍然在工具栏中看到闪烁，因此我将工具栏转换为：

<ul data-theme="b" data-role="listview" style="margin-top: 0;">
     <li data-role="list-divider">Your text goes here</li>...

您的文本位于此处
。。。

添加此行

<style>
/*** patch for jquerymobile page flicker that was happending ***/
    .ui-page {
        -webkit-backface-visibility: hidden;
    } 
</style>

/***jquerymobile页面出现闪烁的补丁***/
.ui页面{
-webkit背面可见性：隐藏；
} 

---

帮助了我。
这只对我起了部分作用：

<style>
body .ui-page
{ 
     height: 100% !important; 
     -webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>

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

将页面加载到DOM中，并且仅在完成转换后，按如下方式进行转换：

var promise = $.mobile.loadPage(url, {
        pageContainer : $("body")
    });
    promise.done(function () {
        var newPage = $("body [data-role='page']:last").attr("id");
        $.mobile.changePage($("#" + newPage));
    });

我仍然会看到页面转换的闪烁

---

---

答案是……
从当前打开的问题来看，建议从reFocus函数中注释掉pageTitle.focus（）
但是，这并没有解决我的问题。我发现有必要删除pageTitle.focus（）和page.focus（），基本上是整个函数

---

这一问题（特别是对重新聚焦功能的更改）也在本期中提到。这是一个针对iOS4的修复程序，并没有解决我的iOS5 iPad问题。
我对注释焦点感到紧张，但谷歌搜索发现以下CSS似乎有效：

.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}

原始链接：
我只是在幻灯片转换上遇到了问题（即使是反向幻灯片也可以正常工作）。 JQ 1.7.1 JQM 1.0.1

---

PhoneGap 1.5.0
不幸的是，这些建议实际上都没有解决问题，至少对我来说没有。然而，最终它在最新的jQuery mobile稳定版本（1.1.0）中得到了修复，所以问题终于解决了！我只需进入并将全局转换更改回幻灯片，因为他们将其设置为淡入淡出：

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

---

希望这能帮助可能没有注意到更新的其他人。
这似乎是一个非常奇怪的错误。我试图修复它。但失败了。最后，我尝试向我的项目添加一些代码以避免此问题
如果你深入了解jquerymobile的页面转换，你就会知道他的原理
它将另一个页面（您要进入的页面）的主体加载到一个元素中，如：
我只是在这个元素之外添加了一个包装器，并设置一个setTimeout来延迟显示这个页面

---

我在iPhone4（ios5）上制作了一个phonegap应用程序，但无法修复此问题。请祈祷jquery移动团队能够快速修复此错误。在花了几天时间解决此问题后，我只想fuxk jqm…
这对我来说只起了部分作用

<style>
body .ui-page
{ 
     height: 100% !important; 
     -webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>

body.ui页面
{ 
身高：100%！重要；
-webkit背面可见性：隐藏；
}
输入{大纲：无；}

---

对于数据转换“翻转”，它起作用，但对于“幻灯片”则不起作用。以下元标记似乎解决了这个问题：

<meta id="viewPortId" name="viewport" content="width=320; user-scalable=no" />

我用以下方法修复了它：

<meta id="viewPortId" name="viewport" content="width=device-width; user-scalable=no" />

实际上，它的运行速度并不慢，在Safari之外使用时，每次幻灯片切换都会闪烁（一次）。非常烦人，但并不慢。但你的意思是这种闪烁也是由于缺少Nitro引擎造成的？如果是，这对jQuery Mobile意味着什么？你知道他们是否意识到这一点吗？（我无法在jQuery论坛上得到回复…）好吧，它似乎运行得并不慢，因为“核心动画”都内置在OSX中，因此iOS本身也是如此。因此，即使是旧的iPhone 3G运行起来也比现代的Androids更流畅、更快。但这只是它的动画部分。这并不是JavaScript引擎的真正功能。当涉及到DOM操作时

<meta id="viewPortId" name="viewport" content="width=320; user-scalable=no" />

<meta id="viewPortId" name="viewport" content="width=device-width; user-scalable=no" />