Переходы мигают при навигации по страницам jQueryMobile

Question

Я разрабатываю приложение HTML5 с использованием PhoneGap + JqueryMobile.Моя проблема в том, что когда я перенаправляю пользователя на другую страницу (например, когда он нажимает на ссылку или нажимает кнопку с изображением), я делаю это с помощью:

$.mobile.changePage("next-page.html");

Проблема заключается в том, что при второй страницезагружается, после того, как переход был выполнен правильно, фоновое изображение, кажется, "мигает" - я вижу фон, затем он мигает белым, а затем я снова вижу фоновое изображение.

Если затем я иду кГлавное меню и сделайте то же самое, проблема «мигания» больше не повторяется, просто при первом открытии веб-сайта.

Есть идеи, почему это происходит?Спасибо!

Answer 1

У меня была эта проблема, и я решил ее следующим образом:

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
}

Answer 2

У меня была такая же проблема. И я получил дополнительные изображения на этой странице. Несколько ответов показывают решение CSS, которое не работает для меня. Вместо этого я использовал этот подход: Мерцание при навигации между страницами

В соответствии с темой jQuery Mobile это проблема производительности на платформе Android 2.x, поэтому я отключил анимированные переходы (подробности в ссылке выше).

Answer 3

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

Например. Допустим, ваша страница «next-page.html» использует значок на кнопке (icon.png). Вы приходите через "next-page.html", и через полсекунды icon.png завершает загрузку. Экран будет мигать, когда на кнопку будет вставлен значок.

Answer 4

Сегодня у меня была похожая проблема при использовании JQuery Mobile 1.4.3 с раздражающим миганием при нажатии кнопки F5 или при открытии страницы без ajax.Все исчезло, а затем появилось.

Если у вас возникла та же проблема, просто удалите этот CSS из jquery.mobile.css:

/* Fouc */
.ui-mobile-rendering > * {
     visibility: hidden;
}

Answer 5

В моем случае это было вызвано для data-position = "fixed" в верхнем и нижнем колонтитулах, как только я убрал их, мигание исчезло.

Вы можете выполнить фиксированный заголовок с помощью простого класса CSS для него, и он будет работать без путаницы при переходах

Answer 6

Эта работа для меня ..

https://github.com/jquery/jquery-mobile/issues/5431

удалить это в jqmobile js файле:

meta.attr( "content", disabledZoom );

... и:

meta.attr( "content", enabledZoom );