jQuery Mobile + Phonegap : Page Header and Contents go Blank after Transition Completes

Question

我有一个 phonegap (2.2.0) + jquery mobile (1.2.0) 应用程序有一个奇怪的问题。

我的应用程序中有一个页面包含加载另一个页面的链接。在加载的页面上，我有一个后退按钮，单击该按钮后，用户将返回到上一页。当我在 Web 浏览器中查看此交互时，它运行良好并且没有抛出任何错误。

但是，当我在 IOS 中查看它时，一旦后退按钮过渡动画完成，页面内容和页眉就会消失。我看到页面显示一闪，然后全部变白。同样，只有页眉和内容消失了。我在要返回的页面上的 pageshow 事件中放置了一个警报，并且在警报关闭之前页面不会变为空白。

更奇怪的是，如果我点击/点击页面的空白区域，内容会神奇地再次出现!我只是不明白。我尝试通过在页面容器上调用 .page() 和/或 .trigger('updatelayout') 来重新绘制页面，但它似乎什么也没做。

只有这个页面有这个问题。所有其他转换工作正常，即使在出现空白页面之后也是如此。

我已经好几个小时没弄明白了，所以非常感谢任何帮助。

Answer 1

结果是一行 CSS 搞砸了。我不久前添加了一些 CSS 以减少转换之间的闪烁。当我删除它时，一切正常。有问题的 css 是这样的:

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