Мерцание при навигации по страницам

Question

Мое мобильное приложение phonegap / jquery мигает большую часть времени, когда я перемещаюсь между страницами.Это нормально или есть решение для этого?

Answer 1

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

Это сработало для меня на phonegap / jquery mobile / телефоне Android.

Answer 2

Есть новости (2012-01-10) о мерцании на Android, см. http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/

Цитата: исключить плохо работающие платформы, такие как Android 2.x, из более сложного слайда, popи и переворачивают переходы, чтобы они возвращались к стандартному замиранию для всех переходов, чтобы обеспечить плавность работы.

Решение 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 выполняет плавные переходы.

Answer 3

Я попробовал другие предложения, но ни одно из них не помогло мне.Я исправил это, изменив метатег viewport следующим образом:

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

Спасибо http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

Answer 4

Я избавился от мерцания на 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%;
}

Answer 5

Ваше приложение для iPhone или Android?

Я видел это в нескольких местах как возможное исправление CSS для мерцания:

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

Answer 6

FIY: я использовал исправление CSS на прошлой неделе, и во время перехода я столкнулся с другой проблемой.

Мое приложение имеет страницу контактов - довольно просто, следуя описанию, приведенному здесь (http://jquerymobile.com/demos/1.0a4.1/docs/forms/#forms-text.html).

Однако, как только фокусируется на поле ввода текста, страница «прыгает» (читай прокрутку) вверх и вниз. Иногда это также прыгает при наборе текста. Это довольно сложно описать, потому что поведение довольно случайное, но об этом идет дискуссия. Идея деактивировать мерцающее исправление приходит и оттуда. https://github.com/jquery/jquery-mobile/issues/2683#commits-ref-d195354

Все еще пытается найти «правильное» решение, но если у вас нет ввода с клавиатуры, я думаю, что оно будет работать нормально!

Answer 7

Проверьте эту ссылку, у меня была та же проблема, поэтому я задокументировал ее.

Содержание ссылки:

Я занимаюсь разработкой проекта Android PhoneGap, в котором используется JQM. мой Проект содержит фиксированный внешний заголовок и внешнюю панель.

При переходе с одной страницы на другую я вижу мигание белого (Весь Страница) на короткий момент, что странно. Я искал в Интернете, но сейчас правильная информация и много изменений кода в файле JQM Core. После длительное исследование, я понял это и хочу, чтобы все знали об этом.

Исправлено: изменение

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

К

<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/

Answer 8

У меня была такая же проблема, но еще хуже, когда я оборачивал мобильное приложение Jquery в Phonegap.Мало того, что переходы страниц мерцали, но пользовательский интерфейс был полностью сломан.Я перепробовал большинство предложенных здесь решений, но ничего не получалось.Затем я нашел это решение Петра Валчишина, и все сработало, как мечта!Настоятельно рекомендуется для всех, кто использует Jquery mobile и Phonegap вместе.

Answer 9

В вашем документе, поместите этот код:

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

Чтобы отключить мерцание переходов, внутри файла disableTransition.js поместите этот код

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

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

Решено для меня на Android.

Answer 10

При использовании решения CSS

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

вы можете столкнуться с другими проблемами, так что это не очень хорошая идея.

На самом деле, у jQuery mobile v1.1.0 есть проблемы с переходами.Посмотрите на это и это .