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

【问题标题】：JQuery-Mobile Page transitions - flickering (separate pages)JQuery-Mobile 页面转换 - 闪烁（单独的页面）
【发布时间】：2013-06-26 19:30:35
【问题描述】：

我花了一天时间研究如何解决 JQuery-Mobile 1.3.1 中页面转换之间的闪烁问题。

我发现了

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

或将data-transition 设置为none

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

帮助。

但显然只有当 web 应用程序只是一个“多页”时才有效。

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

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

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

有没有解决办法？

【问题讨论】：

您能否显示您尝试过的代码...如问题中所述，这些选项通常有助于摆脱 jquery 移动闪烁页面转换。
jsfiddle.net/q5hrx 这是我的代码，我重新编码了，因为出于法律原因我无法显示我的确切代码。这只是内容。但是结构是一样的。在 MobileSafari/homescreen-app/phonegap-app 上，此站点在导航后会闪烁/闪烁
jQuery Mobile flickering screen during transitions的可能重复

标签： css jquery-mobile web-applications cordova

【解决方案1】：

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

这是一个例子：

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>

希望这会有所帮助！

【讨论】：

感谢您的提示。除了你的建议之外，没有别的办法解决了我的问题。
这对我很有用。我已经在全局范围内设置了 transition: none ，但由于某种原因，只有当我将所有脚本与 grunt 连接时，活动页面才会在一个特定的 changePage 调用上闪烁。太棒了。

【解决方案2】：

变通解决方案

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

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：当 data-transition 设置为 none 时不会闪烁。

【讨论】：

【解决方案3】：

这是一个已知问题。

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

【讨论】：

感谢您的回答。你到底什么意思？我已经通过元标记禁用了缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

【解决方案4】：

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

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

例子：

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

【讨论】：

【解决方案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" ，这是一种帮助解决方案，但会影响界面设计。

来源：http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html上的 cmets

【讨论】：

【解决方案6】：

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

链接到.js文件后，

添加

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

到文档的开头。

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

【讨论】：