iPhone jQuery手机闪烁问题

Question

我在iPhone上使用jQuery移动版开发的应用程序时遇到了闪烁的问题。我已经尝试了互联网上可用的几种解决方案，包括CSS更改，将过渡设置为"none"，甚至在jquerymobile.js中注释代码。但是没有运气...我正在使用的JS和CSS文件如下：

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" href="jquery.mobile.structure-1.1.0.min.css" />

对此的任何帮助将不胜感激。谢谢。

Answer 1

当我在过渡期间搜索闪烁的页眉和页脚时，我发现了这个SO线程以及： http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

就是这么简单：如果您要导航到的页面有标题或 与要从中导航的页面具有相同数据 ID 的页脚， 工具栏将在过渡之外固定显示。

<div id="sell" data-role="page" > 
    <div data-role="header" data-id="header" data-position="fixed">
        <h1>Seconds.me</h1>
        <a data-role="button" href="#buy" data-icon="arrow-l" data-theme="app-ios" style="color: white; text-decoration: none;">Back</a>
    </div>
      <h3>1</h3>
      <a href="#buy">2</a>
  </div>  
  <div id="buy" data-role="page" > 
    <div data-role="header" data-id="header" data-position="fixed">
        <h1>Seconds.me</h1>
        <a data-role="button" href="#sell" data-icon="arrow-l" data-theme="app-ios" style="color: white; text-decoration: none;">Back</a>
    </div>
      <h3>2</h3>
      <a href="#sell">1</a>
  </div>

是闪烁的，现在闪烁它没有。请参阅两个页面相同的data-id="header"。

（希望有帮助）

更新：http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html -->此页面还解决了闪烁

Answer 2

尝试下载并使用最新版本的jquery（1.8.2）和jquery mobile（1.2.0）及其css（1.2.0）。

问候

Answer 3

您是否执行了以下解决方法：

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

如此处所述

重要提示：某些平台目前存在过渡问题。我们正在努力为每个人解决问题的解决方案。如果您在过渡期间或结束时遇到闪烁和闪烁，我们建议采取以下解决方法。请注意，在部署之前，应在目标平台上彻底测试此解决方法。已知此解决方法会导致性能问题，并且在某些平台（尤其是 Android）上浏览器崩溃。

Answer 4

在这里，我提出了解决方案......

请按照顺序

// First of all jQuery
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
// then load custom jQuery Mobile
<script type="text/javascript" src="mobile/js/mobile-jqm.js"></script>
// then load jQuery Mobile
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
// finally load your own scripts (.js) files 
<script type="text/javascript" src="mobile/js/script.js"></script>

要禁用转换，请在 mobile-jqm.js 文件中创建 mobile-jqm.js filt 和，放置以下代码：

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