Мое мобильное приложение phonegap/jquery мерцает большую часть времени, когда я перемещаюсь между страницами. Это нормально или есть решение для этого?
Мерцание при навигации между страницами
Ответ 1
.ui-page {
-webkit-backface-visibility: hidden;
}
Это работало для меня на мобильном телефоне/телефоне phone/phone jQuery.
Ответ 2
Есть новости (2012-01-10) о мерцании на Android, см. 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 выполняет плавные переходы.
Ответ 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
Ответ 4
Я избавился от мерцания на iOS! Со статическим заголовком и нижним колонтитулом.
У меня есть мой css, как показано ниже, и нет данных-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%;
}
Ответ 5
Является ли ваше приложение для iPhone или Android?
Я видел это в нескольких местах как возможное исправление CSS для мерцания:
#YourApp {
-webkit-backface-visibility: hidden;
overflow: hidden;
}
Ответ 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
Все еще пытаюсь найти "правильное" решение, но если у вас нет ввода с клавиатуры, я думаю, он будет работать нормально!
Ответ 7
Это известная проблема, которую команда называет "миганием". Они публично заявили, что скоро будут бороться с этим и уже назначили кого-то. Вот последнее сообщение в блоге, в котором упоминается:
http://jquerymobile.com/blog/2011/05/06/jquery-mobile-team-update-week-of-may-2/
Ответ 8
У меня была та же проблема, и она была вызвана дублированием идентификаторов на разных страницах моего HTML.
Несмотря на то, что дубликаты идентификаторов были на разных html-страницах, JQuery Mobile компилирует все ваши HTML файлы в один HTML-документ, чтобы он мог выполнять переходы страниц.
Это привело к недействительному HTML и вызвало мигание, похожее на то, что вы описали.
Как только я исправил проблему с дублирующимися идентификаторами, все работало красиво.
UPDATE: переполнение стека. Ответ здесь объясняется тем, что проблема дублирования идентификаторов в JQuery Mobile fooobar.com/questions/41595/...
Ответ 9
При использовании решения CSS
.ui-page {
-webkit-backface-visibility: hidden;
}
вы можете столкнуться с другими проблемами, поэтому это не очень хорошая идея.
На самом деле, jQuery mobile v1.1.0 имеет проблемы с переходами. Посмотрите этот и этот.
Ответ 10
В своем документе поместите этот код:
<script src="disableTransition.js"></script>
Чтобы отключить мерцающие переходы внутри файла disableTransition.js, поместите этот код
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
defaultPageTransition: 'none'
});
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
});
Решено для меня на Android.
Ответ 11
У меня была такая же проблема, но еще хуже, когда я обернул мобильное приложение JQuery в Phonegap. Мало того, что переходы страницы мерцали, но пользовательский интерфейс был полностью сломан. Я попробовал большинство предлагаемых здесь решений, но ничего не получилось. Затем я нашел это решение Петра Вальчишина, и все работало как сон! Очень рекомендуется для тех, кто использует JQuery mobile и Phonegap вместе.
Ответ 12
Проверьте эту ссылку, у меня была такая же проблема, поэтому я ее зарегистрировал.
Содержимое ссылки:
Я разрабатываю проект phoneGap android, который использует JQM. мой Проект содержит Fixed External header и External Panel.
Во время навигации с одной страницы на другую я вижу белый микс (Целый Страница) на короткий период, который является нечетным. Я искал в Интернете, но сейчас правильная информация и много изменений кода в файле ядра JQM. После долгое исследование, я понял это и хочу, чтобы каждый знал об этом.
Исправить: Изменить
<meta name = "viewport" content="width=device-width, initial-scale=1" />
Для
<meta name = "viewport" content="width=device-width, user-scalable = no" />