페이지 사이를 이동할 때 깜박임

페이지 사이를 이동할 때 깜박임

---

내 phonegap / jquery 모바일 응용 프로그램은 페이지 사이를 이동할 때 대부분 깜박입니다. 이것이 정상입니까 아니면 이에 대한 해결책이 있습니까?

---

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

이것은 phonegap / jquery mobile / Android 전화에서 저에게 효과적이었습니다.

---

Android에서 깜박임에 대한 뉴스 (2012-01-10)가 있습니다. http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond를 참조하십시오. /

인용구 : 더 복잡한 슬라이드, 팝 및 플립 전환에서 Android 2.x와 같이 성능이 저조한 플랫폼을 제외하면 원활한 경험을 보장하기 위해 모든 전환에 대해 기본 페이드로 돌아갑니다.

이 스레드의 CSS 솔루션이 저에게 적합하지 않았습니다 (Android 2.x).

나는 data-transition="none"모든 링크에서 전환을 비활성화했으며 모든 것이 정상이었습니다. 페이지 수준에서 설정했을 때도 작동해야하지만 저에게는 작동하지 않았습니다 (jQuery Mobile 1.0). 다음은 코드입니다.

// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
    $("a").attr("data-transition", "none");
}

또 다른 (더 나은) 방법은 jQuery Mobile의 기본 전환을 설정하는 것입니다.

$(document).bind("mobileinit", function()
{
    if (navigator.userAgent.indexOf("Android") != -1)
    {
        $.mobile.defaultPageTransition = 'none';
        $.mobile.defaultDialogTransition = 'none';
    }
});

iPhone은 하드웨어 가속 전환을 수행하고 다른 플랫폼은 소프트웨어별로 수행합니다. 이것은 iPhone만이 부드러운 전환을 수행하는 이유를 설명합니다.

---

나는 다른 제안을 시도했지만 그들 중 어느 것도 나를 위해 일하지 않았습니다. 뷰포트 메타 태그를 다음과 같이 변경하여 수정했습니다.

<meta name="viewport" content="width=device-width, user-scalable=no" />

http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in 덕분에

---

iOS에서 깜박임을 제거했습니다! 정적 머리글 및 바닥 글 포함.

아래에 내 CSS가 있고 머리글과 바닥 글에 data-position = "fixed"가 없습니다.

.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%;
}

---

Is your app for iPhone or Android?

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

#YourApp {
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

---

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 ( http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html ).

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. https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354

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

---

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:

http://jquerymobile.com/blog/2011/05/06/jquery-mobile-team-update-week-of-may-2/

---

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 https://stackoverflow.com/a/8608474/271125

---

When using CSS solution

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

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

Actually, jQuery mobile v1.1.0 has issues with transitions. Look at this and this.

---

In the of your document, place this code:

<script src="disableTransition.js"></script>

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

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

 $.mobile.defaultPageTransition = 'none';
 $.mobile.defaultDialogTransition = 'none';
});

Solved for me on Android.

---

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 this solution by Piotr Walczyszyn, and everything worked like a dream! Highly recommended for anyone using Jquery mobile and Phonegap together.

---

Check this link , i had same issue so i documented it.

Link content:

I am developing a phoneGap android project which is using JQM. My Project contains Fixed External header and External Panel.

While navigating from one page to another, I see a white blink ( Entire Page) for a brief moment which is odd. I searched online but now proper information and lot of code change on JQM Core file. After a long research, I figured it out and want every one know about it.

Fix: Change

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

To

<meta name = "viewport" content="width=device-width, user-scalable = no" />

https://shariefmohatad.wordpress.com/2014/06/12/blinkingflickering-with-jqmobile-and-phonegap-aka-phonegap-on-android-2/

참고URL : https://stackoverflow.com/questions/5953753/flickering-when-navigating-between-pages