iOS5 + jquery-mobile 过渡闪烁

Posted 2023-05-09

【中文标题】iOS5 + jquery-mobile 过渡闪烁

【英文标题】：iOS5 + jquery-mobile transition blinks

【发布时间】：2012-06-09 19:58:36

【问题描述】：

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

在每次转换时都没有闪烁和预期的工作。 在每次转换时出现描述的闪烁。

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

【问题讨论】：

你看到this website了吗？

尝试了一些描述的方法，但没有运气，但看起来很有希望。继续努力……

@gtm，请将其作为答案发布，这是让它运行的起点！谢谢

已发布，很高兴能帮上忙...

抱歉，我的回答已被版主删除，因为我刚刚提供了链接。线程中的哪个解决方案对您有用？

【参考方案1】：

如果您有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" /> 

【讨论】：

这有助于消除页面之间的闪烁......并且它减少了 URL 栏弹出和备份的时间。不过，它还没有完全消失。

顺便说一句，这个修复后我闪烁的“原因”是因为我的固定标题工具栏是 2 行（而不是通常的 1 行）。关于如何解决这个问题有什么好的想法吗？

这行得通！它以最小的努力解决了这个问题。 (jQM 1.3.1, Cordova 2.4.0)

【参考方案2】：

来源：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 设置为-10，然后在之后重置z-index。

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

【参考方案3】：

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

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

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

【参考方案4】：

尝试添加此处指定的数据转换：Display issues when we change from one jquery mobile page to another in firefox

这是上面答案中的示例：

<a href="#page1" data-transition="fade">I am good transition</a>
<a href="#page1">And I am bad</a>

【参考方案5】：

对我来说，安装滑入式面板时会闪烁和闪烁。有趣的是，即使面板被隐藏，闪烁也会发生，对我来说，发生在可折叠元素上。

我的“解决方案”是将其添加到我的 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);会做。

【参考方案6】：

就我在使用 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
);