Question

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

我已经用Google搜索了一下，发现眨眼很久以前就被认为是一个错误，现在应该修复了。它似乎是在Safari中，但不是从主屏幕独立。有谁知道造成这种情况的原因以及如何解决这个问题？

是否与导航栏不存在有关？它可以在iPhone上独立运行，但它只在iPad上发生......

即使有人可以告诉我这是一个已知的错误（不是已经修复的旧错误之一，甚至在Safari模式下它都会闪烁）或者如果有人对此有所了解，我会接受作为答案（没有人在jQuery论坛回答我的问题......）。但是，如果有人真的有解决问题的办法，我当然会喜欢它！

Answer 1

我有完全相同的问题

http://mailinglist-archive.com/rhomobile/2011-08/00656-Re+rhomobile+page+views+and+transitions提到了一些对我有用的东西。

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

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

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

Answer 2

我很担心评论焦点，但谷歌搜索发现以下似乎有效的CSS：

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

原始链接：https://github.com/jquery/jquery-mobile/issues/2856

我只是遇到了幻灯片转换的问题（即使反向幻灯片工作正常。 JQ 1.7.1 JQM 1.0.1 PhoneGap 1.5.0

Answer 3

修订版：应该注意的是，随着iOS 5.0的发布，下面的讨论得到了缓解。对于没有升级的人来说，它可能是一个部分影响因素，但如果你运行5.0，Nitro就会出现。 http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars

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

有人猜测是否会故意忽略这种性能提升。 http://www.mobilexweb.com/blog/apple-phonegap-html5-nitro。

所以，如果看起来它实际上表现得很慢......那是因为它确实存在。它没有使用Nitro引擎。

Answer 4

添加此行

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

帮助了我。

Answer 5

我修复了：

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

Answer 6

这只对我有用：

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

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

这会阻止页面底部的闪烁和空白，但会注意到转场已关闭。

此外，id不会被多次使用，我可以验证：

// an id used more than once??
    var ids = new Array();
    $.each($("[id]"), function () {ids.push($(this).attr("id"));});

    var matches, val1;
    for (var i = 0; i < ids.length; i++) {
        matches = 0;
        val1 = new RegExp(ids[i], "i");
        for (var i2 = 0; i2 < ids.length; i2++) {
            if (ids[i].length == ids[i2].length && val1.test(ids[i2]) == true)
                matches++;
        }
        if (matches > 1)
            alert("This id was used more than once: " + ids[i]);
    }

还尝试过：

$.extend($.mobile, {
        metaViewportContent: "width=device-width, height=device-height, minimum-scale=1, maximum-scale=1"
    });

将页面加载到DOM中，只有完成转换后才会执行转换：

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

我仍然在页面过渡时闪烁。

答案...... jquery mobile page flicker

Answer 7

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

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

希望这可以帮助那些可能没有注意到更新的人。

Answer 8

似乎以下 META标记解决了这个问题：

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

Answer 9

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

Rolf van der Vleuten注意到：

在页面中多次使用相同的#id时可能会发生闪烁，当您使用单页模板方法时，这不是不可能的。所以一定不要多次使用#id。
我不知道为什么会这样，但我发现当我的第一页出现时默认情况下概述的元素，会发生闪烁，这是通过添加修复：

输入{ 大纲：无; }

Answer 10

从当前公开的问题"Slide page transition causes screen repaint on iOS 5 chromeless"，建议从reFocus函数中注释掉pageTitle.focus（）。

然而这并没有解决我的问题。我发现有必要删除pageTitle.focus（）和page.focus（），基本上是整个函数。

问题2474中也提到了此问题（特别是对reFocus功能的更改）。这是iOS4的修复程序，无法解决我的iOS5 iPad问题。

Answer 11

这似乎是一个非常非常奇怪的错误。我试图修复它。但是失败了。最后我尝试在我的项目中添加一些代码来避免这个问题。

如果你深入了解jquery mobile的页面转换，你就会明白他的原则。

它将另一个页面（您想要去的页面）加载到一个元素中，例如：。

我只是在这个元素之外添加一个包装器，并使setTimeout延迟显示该页面。

我在iPhone 4（ios5）中制作了一个phonegap应用程序并且无法解决这个问题。我们祈祷jquery移动团队能够快速解决这个问题。花了几天时间来解决这个问题我只想找到jqm ...

Answer 12

这只对我有部分影响

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

对于数据转换“翻转”它有效但不适用于“幻灯片”

jQuery Mobile在iPad上的页面转换时闪烁

12 个答案: