在页面之间导航时闪烁

Question

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

Answer 1

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

这适用于phonegap/jquery手机/ Android手机.

Answer 2

有关于Android上闪烁的新闻(2012-01-10),请参阅http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond /

Quote:从更复杂的幻灯片,弹出和翻转过渡中排除表现不佳的平台,如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执行平滑过渡.

Answer 3

我尝试了其他建议,但没有一个适合我.我最后通过更改视口元标记来修复它,如下所示:

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

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

Answer 4

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

我在一些地方看到过这个帖子，作为可能的 CSS 闪烁修复：

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