iOS5 + jquery-mobile转换闪烁

我想在iOS 5上运行时删除jqmobile转换上令人讨厌的闪烁效果。我尝试了其他帖子中的几种方法，如-webkit-backface并做了一些其他工作但未完成解。我观察到flickr发生在转换之前，由于导航栏从顶部移动一个像素（也许是2）而重新定位页面。问题开始于初始化或设备旋转后，当页面被重新呈现，然后我们有两个可能的结果工作，iOS5 + jquery-mobile转换闪烁

无闪烁和预期每次转换工作。
每次出现转折时出现所描述的眨眼。

问题当然是你在新的页面呈现时随机得到1或2。谢谢。这里指定

来源

2012-06-05 Jaume

没有使用自定义样式你看到[这个网站]（https://github.com/jquery/jquery-mobile/issues/4024）？ – gtmtg

尝试了一些描述的方法，但没有运气，但看起来很有前途。继续尝试... – Jaume

好的...希望它可以帮助... – gtmtg

的方法的组合here应该做的伎俩...

对于其他谁有这个问题，OP说，

主要数据位，WebKit的背面和其他人不能提供一个完整的解决方案，我设置为从发布了GitHub的链接jqmobile 1.0的自定义CSS从你的建议，最终的作品

来源

2012-06-16 14:05:24 gtmtg

尝试添加数据转换：Display issues when we change from one jquery mobile page to another in firefox

下面是从上述答案的例子：

<a href="#page1" data-transition="fade">I am good transition</a> 
<a href="#page1">And I am bad</a>

来源

2012-06-12 12:08:18 plouh

已经尝试过，并且在此之前做了一些工作，但不是解决方案。 .. – Jaume

来源：https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5124172

代替数据的位置是：固定到页眉/页脚 - I施加的以下CSS样式到标题，内容和页脚：

.header { 
    position : fixed; 
    z-index : 10; 
    top  : 0; 
    width : 100% 
} 
.content { 
    padding : 45px 15px 
} 
.footer { 
    position : fixed; 
    z-index : 10; 
    bottom : 0; 
    width : 100% 
}

上述链接上的论坛上的几个人表示，这有助于在页面之间切换时使页面/页脚跳转。

从托德帕克（一个jQuery移动创建者）另一项建议是这样的：

.ui-mobile-viewport-transitioning .ui-header-fixed, 
.ui-mobile-viewport-transitioning .ui-footer-fixed { visibility: hidden; }

而从一个页面转移到另一个，它可以隐藏固定页眉/页脚。

来源：https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856

还有一个提交由另一个jQuery Mobile的团队成员应表现出向上在下一版本中做出。这里是帖子：https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856（这里的代码有点复杂）

最近由于这个提交：https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994而关闭了问题。此修复方法是在滚动之前将传入页面的z-index设置为-10，然后再重置z-index。

我还没有尝试过任何这些修补程序，但他们似乎很有希望。

来源

2012-06-16 18:33:08 Jasper

+1最好的理解......谢谢 – Jaume

如果你有data-position="fixed"然后一个解决方案是使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

来源

2013-01-28 15:27:10 cherouvim

这对我有效！ Android 4.2.1，jQM 1.3.0，Cordova 2.3.0 – aalaap

这样可以消除页面之间的闪烁......并减少了URL栏弹出和备份的时间。尽管如此，它还没有完全消失。 –

顺便说一句，这个修复后我的闪烁的“原因”是因为我的固定标题工具栏是2行（而不是通常的1行）。有关如何解决这个问题的好主意？ –

对于我来说，我得到了闪烁和安装在面板上滑动时闪烁。即使面板被隐藏，闪烁的笑容也会发生，而对于我来说，发生在可折叠的元素上。

我的“解决方案”是加入到我的css文件：（从http://api.jquerymobile.com/panel/建议）使用jQuery移动1.3.1：

div { 
    -webkit-transform: translate3d(0,0,0); 
}

这听起来很疯狂 - 但“为我工作”。（是所有div）

似乎没有任何副作用 - 但。我已经在OpenGL中编写了程序，但是不知道什么是-webkit-transform：translate3d（0,0,0）;会做。

来源

2013-05-16 22:27:35

就我发现使用Cordova 2.9而言，Android 4.0+上的常见问题。和JQM 1.3： - 即使“无”过渡指定页面过渡白色闪烁 - 做一个导航

在测试了SGII，摩托罗拉MC40，TC55，在所有平台上同样的问题，需要双水龙头。

的页眉，页脚内容，删除数据位= “固定”

JQM的使用初始化（注意，放置JS 以前 JQM包括）

.header { 
    position : fixed !important; 
    z-index : 10 !important; 
    top  : 0 !important; 
    width : 100% !important; 
} 
.content { 
    padding : 55px 15px !important; 
} 
.footer { 
    position : fixed !important; 
    z-index : 10 !important; 
    bottom : 0 !important; 
    width : 100% !important; 
} 

//use this init 

$(document).bind("mobileinit", function() 
{ 
    $.mobile.defaultPageTransition = "fade"; //default, see styles 
    $.mobile.transitionFallbacks='none'; 
    $.mobile.useFastClick = false; //300ms or double tap needed 
});

来源

2013-08-20 06:34:04 OSP

iOS5 + jquery-mobile转换闪烁

回答

相关问题