Question

我花了一天时间弄清楚如何修复JQuery-Mobile 1.3.1中页面转换之间的闪烁。

我找到了

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

或将data-transition设置为none

或从JQM文件中删除meta.attr( "content", disabledZoom );和meta.attr( "content", enabledZoom );

帮助。

但显然只有在webapp只是一个“多页”的情况下才有效。

我正在使用4个单独的页面。

在iOS（移动版Safari）和PC（浏览器：Chrome）中，我没有任何过渡闪烁。但是只要我将应用程序添加到主屏幕，它就会再次闪烁。

在这里，我读到如果使用单独的HTML文件，则无法避免（PhoneGap / Homescreenapp）的页面闪烁：https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J

对此没有解决方案吗？

Answer 1

到目前为止，我没有回答任何问题。我最终将一个函数绑定到导致页面更改的所有链接或元素。在函数中，我触发了页面更改，但明确地告诉它没有“转换”。

以下是一个例子：

Javscript（jQuery）

$('.item-navbar-people').on('tap', function (e) {
  $.mobile.changePage("#page-people", { transition: "none" });
});

标记

<div data-role="navbar">
  <ul>
    <li><a class="item-navbar-people ui-btn-active">People</a></li>
  </ul>
</div>

希望这有帮助！

Answer 2

解决方案

所以，这些是我尝试过的东西：

data-transition="none" / $.mobile.defaultPageTransition = 'none';
.ui-page { backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Chrome and Safari */ -moz-backface-visibility: hidden; /* Firefox */ }
删除meta.attr( "content", disabledZoom );＆amp; jquery.mobile.js中的meta.attr( "content", enabledZoom );
-webkit-transform:translate3d(0,0,0);
data-position="fixed"页眉/页脚
停用元标记中的用户比例

它不适用于“Homescreen-App”/“PhoneGap-App” 我还应用body{ background-color: black !important }使眨眼看起来更加微妙，虽然有效但仍然很难看。

所以我找到了一个解决方法：jQuery 1.1.0 RC2和jQuery 1.7.1：当数据转换设置为无时，没有闪烁。

Answer 3

这是一个已知问题。

在每次转换页面之前禁用/启用zoom将解决此问题。

Answer 4

我想通了，改变了视口元标记的比例。

让我澄清一下... 在我的测试中，我看到当我在移动设备上应用一些放大页面时，过渡效果很好。因此，只需将视口元标记中的初始比例更改为高于 1.0 的值，例如 1.01。就这样！

示例：

<meta name="viewport" content="width=device-width, initial-scale=1.01">

Answer 5

我花了数周时间在互联网上尝试所有建议的解决方案，适用于jquery.mobile-1.3.2，Android 4.1.2，phonegap 2.9.0是在jquery.mobile-1.3.2.js文件中删除这些行

meta.attr( “content”, disabledZoom );  // just put // before the line



meta.attr( “content”, enabledZoom ); // just put // before the line

这将消除双击，也

将页面之间的数据转换设置为无

data-transition="none"

（第二个修正是暂时的，直到你找到一个解决方案，以便在过渡期间获得剩余的白页）

使用此解决方案，无需从页眉或页脚中删除data-position =“fixed”，这是帮助解决方案之一，但会影响界面设计。

的评论

Answer 6

我遇到了同样的问题，并且加速了闪烁的效果，并在此处找到了fastclick.js：https://github.com/ftlabs/fastclick。

链接到.js文件后，

添加

<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>

到文档的头部。

瞧。这对我有所帮助，希望它对你有帮助！