css - JQuery-Mobile 页面转换 - 闪烁（单独的页面）

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

没有解决方案吗？

score 7 · Accepted Answer

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

这是一个例子：

Javascript (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>

希望这可以帮助！

score 2 · Accepted Answer

解决方案

所以，这些是我尝试过的事情：

data-transition="none"/$.mobile.defaultPageTransition = 'none';
.ui-page { backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Chrome and Safari */ -moz-backface-visibility: hidden; /* Firefox */ }
在 jquery.mobile.js 中删除meta.attr( "content", disabledZoom );&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：当数据转换设置为无时没有闪烁。

score 0 · Accepted Answer

0

这是一个已知的问题。

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

于 2013-06-26T19:48:32.703 回答

score 0 · Accepted Answer

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

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

例子：

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

score -1 · Accepted Answer

我遇到了同样的问题，加快速度并消除闪烁效果的方法是在此处实现 fastclick.js：https ://github.com/ftlabs/fastclick 。

链接到 .js 文件后，

添加

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

到文档的开头。

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

score -1 · Accepted Answer

我花了数周时间尝试互联网上所有建议的解决方案，适用于 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" ，这是一种帮助解决方案，但会影响界面设计。

6 回答 6