blocks|key|687167|text|你的应用是iPhone版还是安卓版？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|687168|我已经在一些地方看到了这篇文章，它可能是针对闪烁的CSS修复：|687169|#YourApp+{
++++-webkit-backface-visibility:+hidden;
++++overflow:+hidden;
}|code-block|syntax|javascript|687170|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Is your app for iPhone or Android?

I've seen this posted in a few spots as a possible CSS fix for the flickering:

<pre><code>#YourApp {
 -webkit-backface-visibility: hidden;
 overflow: hidden;
}
</code></pre>

blocks|key|903684|text|这是一个已知的问题，该团队将其称为“眨眼”。他们公开表示，他们将很快解决这一问题，并已指派专人负责。最近有一篇博文提到了这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|903685|http://jquerymobile.com/blog/2011/05/06/jquery-mobile-team-update-week-of-may-2/|offset|length|903686|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|28|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

This is a known issue that the team refers to as "blinking". They've said publicly that they will be tackling this soon and have already assigned someone to it. Here's a recent blog post that mentions it:

<a href="http://jquerymobile.com/blog/2011/05/06/jquery-mobile-team-update-week-of-may-2/" rel="nofollow">http://jquerymobile.com/blog/2011/05/06/jquery-mobile-team-update-week-of-may-2/</a>

blocks|key|903712|text|.ui-page+{
++++-webkit-backface-visibility:+hidden;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|903713|这对我在phonegap+/+jquery手机/+Android手机上很有效。|unstyled|903714|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>.ui-page {
 -webkit-backface-visibility: hidden;
}
</code></pre>

This worked for me on phonegap / jquery mobile / Android phone.

blocks|key|903778|text|FIY:我上周使用了CSS修复，在继续下一步时，我遇到了另一个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|903779|我的应用程序有一个联系页面-按照这里提供的描述非常简单(+http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html+)。|offset|length|903780|然而，一旦聚焦文本输入域，页面就会上下“跳跃”(阅读滚动)。有时，在输入文本时，它也会跳转。这有点难以描述，因为行为是相当随机的，但有关于它的讨论。停用闪烁修复的想法也来自于此。https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354|903781|仍然在努力寻找一个“适当的”解决方案，但如果你没有键盘输入，我想它会工作得很好！|903782|entityMap|0|LINK|mutability|MUTABLE|url|http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html|1|https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354^0|0|T|1T|0|0|2H|1Z|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

FIY: I used the CSS fix last week and while moving on I encountered another problem.

My app has a contact page - pretty straight forward by following the description provided here ( <a href="http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html" rel="nofollow">http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html</a> ).

However as soon as focussing a text input field the page is "jumping" (read scroling) up and down. Sometimes it also jumps when typing in text. It is kinda hard to describe cause the behavior is quite random but there is a discussion about it. The idea to deactivate the flickering fix comes from there as well.
<a href="https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354" rel="nofollow">https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354</a>

Still struggling to find a "proper" solution but in case you have no keyboard input I guess it will work fine!

blocks|key|903836|text|我摆脱了iOS上的闪光！具有静态页眉和静态页脚。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|903837|我的css如下所示，页眉和页脚上没有data-position="fixed“。|903838|.ui-mobile,+.ui-mobile+.ui-page,+.ui-mobile+[data-role="page"],
.ui-mobile+[data-role="dialog"],+.ui-page,+.ui-mobile+.ui-page-active+{
++++++overflow:+hidden;
++++++-webkit-backface-visibility:+hidden;
}

.ui-header+{
++++position:fixed;
++++z-index:10;
++++top:0;
++++width:100%25;
++++padding:+13px+0;
++++height:+15px;
}

.ui-content+{
++++padding-top:+57px;
++++padding-bottom:+54px;
++++overflow:+auto;
++++position:+absolute;
++++top:+0;
++++right:+0;
++++bottom:+0;
++++left:+0;
}

.ui-footer+{
++++position:fixed;
++++z-index:10;
+++bottom:0;
+++width:100%25;
}|code-block|syntax|javascript|903839|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I got rid of the flicker on iOS! With static header and footer.

I have my css as below and no data-position="fixed" on the header and footer.

<pre><code>.ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"],
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active {
 overflow: hidden;
 -webkit-backface-visibility: hidden;
}

.ui-header {
 position:fixed;
 z-index:10;
 top:0;
 width:100%;
 padding: 13px 0;
 height: 15px;
}

.ui-content {
 padding-top: 57px;
 padding-bottom: 54px;
 overflow: auto;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

.ui-footer {
 position:fixed;
 z-index:10;
 bottom:0;
 width:100%;
}
</code></pre>

blocks|key|687423|text|我也有同样的问题，它是由我的HTML中不同页面上的重复ids引起的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|687424|即使重复的it在不同的HTML页中，HTMLMobile会将所有的JQuery文件编译成一个单独的HTML文档，这样它就可以执行页面转换。|687425|这会导致无效的HTML，并导致类似于您所描述的闪烁。|687426|一旦我纠正了重复ids的问题，所有的工作都很漂亮。|687427|更新:堆栈溢出解答这里详细解释了Jquery+Mobile+https://stackoverflow.com/a/8608474/271125中的重复ids问题|offset|length|687428|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/8608474/271125^0|0|0|0|0|U|16|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$J|Y|K|Z|1|10]]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

I had the same problem and it was caused by duplicate ids across different pages in my HTML. 

Even though the duplicate ids were in different html pages, JQuery Mobile compiles all your HTML files into one single HTML document, so that it can perform the page transitions. 

This was resulting in invalid HTML and causing the blinking similar to what you describe. 

Once I corrected the duplicate ids issue, all worked beautifully. 

UPDATE: Stack Overflow Answer here explaining more about the duplicate ids issue in Jquery Mobile <a href="https://stackoverflow.com/a/8608474/271125">https://stackoverflow.com/a/8608474/271125</a>

blocks|key|903999|text|使用CSS解决方案时|type|unstyled|depth|inlineStyleRanges|entityRanges|data|904000|.ui-page+{
++++-webkit-backface-visibility:+hidden;
}|code-block|syntax|javascript|904001|您可能会遇到其他问题，因此这不是一个好主意。|904002|实际上，jQuery+MobileV1.1.0在转换方面存在问题。看看this和this。|offset|length|904003|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jquery/jquery-mobile/issues/4024|1|https://github.com/jquery/jquery-mobile/issues/3768^0|0|0|0|Z|4|0|14|4|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]|$K|13|L|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

When using CSS solution

<pre><code>.ui-page {
 -webkit-backface-visibility: hidden;
}
</code></pre>

you may encounter other issues, so it's not a good idea.

Actually, jQuery mobile v1.1.0 has issues with transitions. Look at <a href="https://github.com/jquery/jquery-mobile/issues/4024" rel="nofollow">this</a> and <a href="https://github.com/jquery/jquery-mobile/issues/3768" rel="nofollow">this</a>.

blocks|key|687540|text|在文档的中，放置以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|687541|<script+src="disableTransition.js"></script>|code-block|syntax|javascript|687542|要禁用闪烁过渡，请在disableTransition.js文件中放置以下代码|687543|$(document).bind("mobileinit",+function(){
+$.extend(++$.mobile+,+{
+defaultPageTransition:+'none'+
});

+$.mobile.defaultPageTransition+=+'none';
+$.mobile.defaultDialogTransition+=+'none';
});|687544|在Android上解决了我的问题。|687545|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In the of your document, place this code:

<pre><code>&lt;script src="disableTransition.js"&gt;&lt;/script&gt;
</code></pre>

To disable Flickering transitions, inside of the disableTransition.js file, place this code

<pre><code>$(document).bind("mobileinit", function(){
 $.extend( $.mobile , {
 defaultPageTransition: 'none' 
});

 $.mobile.defaultPageTransition = 'none';
 $.mobile.defaultDialogTransition = 'none';
});
</code></pre>

Solved for me on Android.

blocks|key|687589|text|我遇到了同样的问题，但更糟糕的是，在Phonegap中包装Jquery移动应用程序时。不仅页面过渡闪烁，而且UI也完全损坏了。我已经尝试了这里建议的大多数解决方案，但都不起作用。然后我发现了Piotr+Walczyszyn的this解决方案，一切都像梦一样工作！强烈推荐给同时使用Jquery+mobile和Phonegap的用户。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|687590|entityMap|0|LINK|mutability|MUTABLE|url|http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/^0|34|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I had the same problem, but even worse, when wrapping a Jquery mobile app in Phonegap. Not only were the page transitions flickering, but the UI was completely broken. I have tried most of the solutions suggested here, but nothing worked. Then I found <a href="http://outof.me/fixing-flickers-jumps-of-jquery-mobile-transitions-in-phonegap-apps/" rel="nofollow">this</a> solution by Piotr Walczyszyn, and everything worked like a dream! Highly recommended for anyone using Jquery mobile and Phonegap together.

blocks|key|904106|text|我尝试了其他的建议，但没有一个对我有效。我最终修改了viewport的meta标签，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|904107|<meta+name="viewport"+content="width=device-width,+user-scalable=no"+/>|code-block|syntax|javascript|904108|感谢http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in|offset|length|904109|entityMap|0|LINK|mutability|MUTABLE|url|http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in^0|0|0|2|2I|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I tried the other suggestions but none of them worked for me. 
I ended up fixing it by changing the viewport meta tag as follows:

<pre><code>&lt;meta name="viewport" content="width=device-width, user-scalable=no" /&gt;
</code></pre>

Thanks to <a href="http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in">http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in</a>

My phonegap/jquery mobile application flickers most of the time when I navigate between the pages. Is this normal or is there a solution for this?

Flickering when navigating between pages

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当我在页面之间导航时，我的phonegap/jquery移动应用程序大部分时间都会闪烁。这是正常的吗?还是有解决方案？

问在页面间导航时闪烁
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在页面间导航时闪烁EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在页面间导航时闪烁
EN