iOS5 + jquery-mobile转换闪烁

我试图删除在iOS 5上运行时对jqmobile转换的恼人的闪烁效果。我尝试了其他职位的几个方法，如-webkit-backface，做了一些其他的工作，但没有达到完整的解决scheme。 我观察到flickr发生在转换之前，由于导航栏从顶部移动一个像素（也许是2）而重新定位页面。 问题从初始化开始，或者在页面被重新渲染之后的设备旋转之后，我们得到了两个可能的工作结果，

1. 在每次转换时无闪烁和预期工作。
2. 每一个转折出现的描述都会闪烁。

问题当然是，当新页面呈现时，你会随机得到1或2个。 谢谢。

Answer 1

这里的方法的组合应该做的伎俩…

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

主要是数据位置，webkit的背面和其他人没有提供一个完整的解决scheme，我设置了一个自定义的CSS来自jqmobile 1.0张贴在你的build议github链接，最后的作品

Answer 2

如果你有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" /> 

Answer 3

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

而不是数据位置：固定到页眉/页脚 – 我将下面的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% } 

在上面的链接上的论坛上的几个人已经表示，这有助于与页面之间的data-position:fixed页眉/页脚之间的过渡闪烁。

另一个来自Todd Parker（一位jQuery Mobile创build者）的build议是这样的：

 .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团队成员提交的，应该在下一个版本中显示。 这里是post： https : //github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856 （这里的代码有点复杂）

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

我自己并没有尝试过任何这些修复，但他们似乎很有希望。

Answer 4

尝试添加数据转换如下所示： 显示问题，当我们从一个jQuery的移动页面更改为另一个Firefox

这里是上面的答案的例子：

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

Answer 5

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

我的'解决scheme'是把这个添加到我的css文件中:(如http://api.jquerymobile.com/panel/所示 ）使用JQuery Mobile 1.3.1：

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

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

似乎没有任何副作用。

我已经在OpenGL中编写程序，但是不知道什么是-webkit-transform：translate3d（0,0,0）; 会做。

Answer 6

就我发现使用Cordova 2.9而言，Android 4.0+上的常见问题。 和JQM 1.3： – 即使在指定“无”转换时，页面转换也会发生白色闪烁 – 执行导航所需的双击

testingSGII，摩托罗拉MC40，TC55，在所有平台上的相同问题。

使用自定义样式的页眉，页脚，内容，删除data-position =“fixed”

使用JQM的初始化（请注意， 在 JQM 之前放置JS）

 .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 });