5

我试图消除在 i​​OS 5 上运行时对 jqmobile 转换的恼人闪烁效果。我尝试了其他帖子（如 -webkit-backface）中的几种方法，并做了一些其他工作，但没有达到完整的解决方案。我观察到在转换之前，由于导航栏从顶部移动一个像素（可能是 2）而重新定位页面时会发生 flickr。问题开始于初始化或重新渲染页面时设备旋转之后，然后我们得到两个可能的工作结果，

  1. 在每次转换时都没有闪烁和预期的工作。
  2. 落在每个出现描述闪烁的过渡上。

当然，问题是您在新页面呈现时随机获得 1 或 2。谢谢你。

4

6 回答 6

7

如果你有data-position="fixed"那么一个解决方案是使用：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
于 2013-01-28T15:27:10.070 回答
4

来源：https ://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5124172

而不是 data-position:fixed 到页眉/页脚 - 我将以下 CSS 样式应用于页眉、内容和页脚：

.header {
    position : fixed;
    z-index  : 10;
    top      : 0;
    width    : 100%
}
.content {
    padding : 45px 15px
}
.footer {
    position : fixed;
    z-index  : 10;
    bottom   : 0;
    width    : 100%
}

论坛上的几个人在上述链接中表示，这有助于在带有data-position:fixed页眉/页脚的页面之间转换时出现闪烁。

Tod Parker（jQuery Mobile 的创建者）的另一个建议是：

.ui-mobile-viewport-transitioning .ui-header-fixed,
.ui-mobile-viewport-transitioning .ui-footer-fixed { visibility: hidden; }

在从一页转换到另一页时隐藏固定的页眉/页脚。

来源：https ://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856

另一个 jQuery Mobile 团队成员也做出了一个提交，应该会在下一个版本中出现。这是帖子：https ://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856 （代码有点复杂，在这里发布）

最近，由于此提交，该问题已关闭：https ://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994 。此修复是在滚动之前z-index将传入页面设置为，然后在之后重置。-10z-index

我自己没有尝试过任何这些修复，但它们似乎很有希望。

于 2012-06-16T18:33:08.533 回答
2

这里的方法组合应该可以解决问题......

对于其他有此问题的人，OP 说

主要是数据位置、webkit 背面和其他没有提供完整的解决方案，我设置了一个来自 jqmobile 1.0 的自定义 css，发布在你建议的 github 链接上，最后可以工作

于 2012-06-16T14:05:24.220 回答
0

尝试按照此处指定的方式添加数据转换：当我们在 Firefox 中从一个 jquery 移动页面更改为另一个页面时显示问题

这是上面答案中的示例：

<a href="#page1" data-transition="fade">I am good transition</a>
<a href="#page1">And I am bad</a>
于 2012-06-12T12:08:18.163 回答
0

对我来说，安装面板中的幻灯片时，我会闪烁和闪烁。即使面板被隐藏，闪烁也很有趣，对我来说发生在可折叠元素上。

我的“解决方案”是将其添加到我的 css 文件中：（根据http://api.jquerymobile.com/panel/的建议）使用 JQuery Mobile 1.3.1：

div {
   -webkit-transform: translate3d(0,0,0);
 }

这听起来很疯狂——但“为我工作”。（是的所有div）

似乎还没有看到副作用。

我已经用 OpenGL 编写了程序，但不知道 -webkit-transform: translate3d(0,0,0); 是什么 会做。

于 2013-05-16T22:27:35.177 回答
0

据我使用 Cordova 2.9 发现的 Android 4.0+ 上的常见问题。和 JQM 1.3： - 即使指定了“无”转换，页面转换也会出现白色闪烁 - 需要双击才能进行导航

在 SGII、摩托罗拉 MC40、TC55 上测试，在所有平台上都有相同的问题。

对页眉、页脚、内容使用自定义样式，删除 data-position="fixed"

使用 JQM 的初始化（注意，将 JS 放在JQM 包含之前）

.header {
    position : fixed !important;
    z-index  : 10 !important;
    top      : 0 !important;
    width    : 100% !important;
}
.content {
    padding : 55px 15px !important;
}
.footer {
    position : fixed !important;
    z-index  : 10 !important;
    bottom   : 0 !important;
    width    : 100% !important;
}

//use this init

$(document).bind("mobileinit", function()
{
    $.mobile.defaultPageTransition = "fade"; //default, see styles
    $.mobile.transitionFallbacks='none';
    $.mobile.useFastClick = false; //300ms or double tap needed
});
于 2013-08-20T06:34:04.757 回答