logo标签列表

在页面导航时出现闪烁问题

cordovajquery-mobile
65

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

12个回答
40
.ui-page {
    -webkit-backface-visibility: hidden;
}

这对我在PhoneGap / jQuery Mobile / Android手机上的工作。

@Decoy 是的，对我在 jQuery Mobile 上也起作用了。如果我有单独的页面 1.html、2.html、3.html 呢？ - Sahil Grover
7
小心。这个“修复”破坏了我们在Android 2.3上的一些表格，这妨碍你选择下拉菜单中的选项。奇怪的是，Android 2.2和4.0都没问题，任何版本的iOS我们都没发现问题。 - AlexMax
这对我来说仍然有效，使用iPad2/iOS 5.1，PhoneGap 1.4和jQuery Mobile 1.1.0-RC1。谢谢！ - bafromca
18

有关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 能够实现平滑的过渡效果。

1
我不得不在一个旧项目中进行一些修复，这个提示最终帮了我，谢谢！ - santuxus
1
我也必须评论一下，第二种方式（“更好的方式”）可以解决所有问题！！！非常感谢！ - Yaircl
16
这个解决方案对我有效。Android 4.2.2，JQM 1.3.1和Phonegap 2.8。 - ethree
这是正确的解决方案...在安卓2.3（HTC Desire）和4.2（三星平板电脑）上也适用于我。 - Tony
添加"user-scalable=no"解决了我的问题（Android 4.0.3 HTC Rezound）。 - jwinn
适用于Android 4+和Phonegap 2.9。 - WiseGuy
适用于我的Android 4.2，Jquery Mobile 1.4.2和Phonegap 3.4.1。 - Leo Medeiros
3
我解决了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%;
}
2

你的应用是为iPhone还是Android设计的？

我在几个地方看到过这个可能是CSS修复闪烁问题的解决方法：

#YourApp {
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
这个CSS修复应该放在哪里？在我的jquery.mobile-1.0a4.1.min.css文件中吗？ - mike643
1
我会让jquery css文件保持原样。你没有使用自己的CSS文件吗？如果是这样，请将其添加到那里并针对body标签进行定位。例如：body { -webkit-backface-visibility: hidden; overflow: hidden; } - avoision
仍然不起作用。我尝试了这个，但是闪烁仍然存在。这个CSS可以工作-webkit-transform:translate3d(0,0,0)，但是如果我在表单中输入，屏幕会上下移动。 - mike643
1

顺带一提：我上周使用了 CSS 修复方法，但在继续时遇到了另一个问题。

我的应用有一个联系页面 - 按照这里提供的说明很容易（http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html）。

然而，一旦聚焦于文本输入字段，页面就会“跳动”（滚动）起来。有时键入文本时也会出现此问题。因为行为比较随机，所以难以描述，不过这里有关于它的讨论。禁用闪烁修复的想法也来自这里。 https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354

仍在努力寻找“合适”的解决方案，但如果您没有键盘输入的话，我想这将是有效的！

0
0

我曾经遇到过相同的问题，但情况更糟，当在Phonegap中包装一个Jquery mobile应用时。页面转换不仅闪烁不定，而且界面完全崩溃。我尝试了这里提出的大多数解决方案，但没有一个有效。然后我找到了Piotr Walczyszyn的this解决方案，一切都像梦中一样顺利！强烈推荐给任何同时使用Jquery mobile和Phonegap的人。

0

我曾经遇到同样的问题，原因是我的HTML文件中有不同页面之间重复的ID。

尽管这些重复的ID位于不同的HTML页面上，但JQuery Mobile会将所有HTML文件编译为一个单一的HTML文档，以便进行页面转换。

这导致HTML无效，从而导致类似于您所描述的闪烁现象。

一旦我解决了重复的ID问题，一切都运作得非常好。

更新：在此处有一个Stack Overflow答案，更详细地解释了Jquery Mobile中重复ID的问题 https://stackoverflow.com/a/8608474/271125

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

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

为了禁用闪烁转换，在disableTransition.js文件中，放置以下代码

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

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

在安卓上对我解决了问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接