JQuery-Mobile页面转换 - 闪烁（单独页面） [英] JQuery-Mobile Page transitions - flickering (separate pages)

问题描述

我花了一天时间弄清楚如何修正JQuery-Mobile 1.3.1中页面转换之间的闪烁。

我发现

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

或设定 data-transition none

或移除 meta.attr（content，disabledZoom） code>和 meta.attr（content，enabledZoom）; 从JQM文件

但显然只有在webapp只是一个多页时才有效。

$ b

在iOS（移动Safari）和PC（浏览器：Chrome）中，我使用4个不同的页面没有任何转换闪烁。
但是一旦我将应用程序添加到主屏幕，它会再次闪烁。

在这里，我读到没有可能避免页面闪烁/ Homescreenapp）（如果有单独的HTML文件正在使用）： https://groups.google .com / d / msg / phonegap / tqdv3tYIj_o / qfft32VbLg8J

没有解决方案？ b $ b

解决方案

解决方案

所以，这些是我试过的东西：

• transition =none / $。mobile.defaultPageTransition ='none';


• .ui-page {backface-visibility：hidden;
-webkit-backface-visibility：hidden; / * Chrome和Safari * /
-moz-backface-visibility：hidden; / * Firefox * /}


• delete 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 code> jQuery 1.7.1 ：当数据转换设置为无时无闪烁。

I spend the day figuring out how to fix the flickering between page transitions in JQuery-Mobile 1.3.1.

I found that

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

or setting the data-transition to none

or removing meta.attr( "content", disabledZoom ); and meta.attr( "content", enabledZoom ); from JQM file

helped.

But apparently that is only working if the webapp is just one "multi-page".

I am using 4 separate pages.

In iOS (mobile Safari) and on PC (Browser: Chrome) I don't have any transition flickering. But as soon as I add the App to to the Homescreen it flickers again.

Here I read that there is no possibility in avoiding page flickering for (PhoneGap/Homescreenapp) if there are separate HTML files in use: https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J

Is there no solution for this?

解决方案

Work-around Solution

So, these are the things I tried:

• data-transition="none" / $.mobile.defaultPageTransition = 'none';
• .ui-page { backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Chrome and Safari */ -moz-backface-visibility: hidden; /* Firefox */ }
• delete meta.attr( "content", disabledZoom ); & meta.attr( "content", enabledZoom ); in jquery.mobile.js
• -webkit-transform:translate3d(0,0,0);
• data-position="fixed" headers/footers
• deactivating user scale in meta tags

It did not work for "Homescreen-App"/"PhoneGap-App" I also applied body{ background-color: black !important } to make the blink appear more subtile , which worked but was still ugly.

So I found a work-around solution: jQuery 1.1.0 RC2 and jQuery 1.7.1: no flickering when data-transition is set to none.

这篇关于JQuery-Mobile页面转换 - 闪烁（单独页面）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！