iOS5 + jquery-мобильный переход мигает

Я пытаюсь убрать раздражающий эффект мерцания при переходах jqmobile при работе на iOS 5. Я попробовал несколько методов из других постов, таких как -webkit-backface, и проделал какую-то другую работу, но не достиг полного решения. Я заметил, что flickr возникает, когда перед переходом страница перемещается из-за того, что панель навигации смещена на один пиксель (возможно, на 2) сверху. Проблема начинается при инициализации или после поворота устройства, когда страница перерисовывается, и тогда мы получаем два возможных рабочих результата,

Working without flickering and expected on each transition. Falls on each transition appearing described blink.

проблема, конечно, в том, что вы получаете 1 или 2 случайно при рендеринге новой страницы. Спасибо.

 gtmtg11 июн. 2012 г., 13:48
Ты виделthis website?
 gtmtg15 июн. 2012 г., 14:39
Написал, рад, что смог помочь ...
 gtmtg13 июн. 2012 г., 16:55
ОК ... надеюсь, это поможет ...
 Jaume13 июн. 2012 г., 10:51
попробовал некоторые из описанных методов, но не повезло, но выглядит многообещающе. Продолжай пытаться ...
 Jaume15 июн. 2012 г., 13:54
@ gtm, пожалуйста, опубликуйте это как ответ, это было отправной точкой для его запуска! Спасибо

Ответы на вопрос(6)

https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5124172

Instead of data-position:fixed to the header / footer - I applied the following CSS styles to the header, content and footer:

.header {
    position : fixed;
    z-index  : 10;
    top      : 0;
    width    : 100%
}
.content {
    padding : 45px 15px
}
.footer {
    position : fixed;
    z-index  : 10;
    bottom   : 0;
    width    : 100%
}

Несколько человек на форуме по вышеуказанной ссылке заявили, что это помогло с вспышками при переходе между страницами сdata-position:fixed верхний / нижний колонтитул.

Еще одно предложение от Тода Паркера (создателя jQuery Mobile) заключалось в следующем:

.ui-mobile-viewport-transitioning .ui-header-fixed,
.ui-mobile-viewport-transitioning .ui-footer-fixed { visibility: hidden; }

Который скрывает фиксированный колонтитул при переходе с одной страницы на другую.

https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856

Был также сделанный коммит другим членом команды jQuery Mobile, который должен появиться в следующем выпуске. Вот этот пост:https://github.com/jquery/jquery-mobile/issues/4024#issuecomment-5250856 (код немного сложен для публикации здесь)

Совсем недавно проблема была закрыта из-за этой фиксации:https://github.com/Diveboard/jquery-mobile/commit/ff125b65e682ecd33888a6db1221ac441d258994, Это исправление должно было установитьz-index входящей страницы в-10 перед прокруткой, а затем сброситьz-index после этого.

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

 Jaume21 июн. 2012 г., 23:49
+1 за лучшее понимание ... спасибо
Решение Вопроса

Вот должен сделать трюк ...

Для тех, кто имеет эту проблему, ОП сказал, что

Mainly data-position, webkit backface and others not provide a full solution and I set a custom css from jqmobile 1.0 posted on a github link from suggested by you and finally works

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

Мое "решение" должен был добавить это в мой файл CSS: (как предложено изhttp://api.jquerymobile.com/panel/ ) С JQuery Mobile 1.3.1:

div {
   -webkit-transform: translate3d(0,0,0);
 }

Это звучит безумно, но «сработало для меня». (Да все дивы)

Кажется, что побочных эффектов не видно - пока.

Я написал программы на OpenGL, но понятия не имею, что -webkit-transform: translate3d (0,0,0); сделал бы.

насколько я обнаружил с помощью Cordova 2.9. и JQM 1.3: - мерцание перехода страницы, даже когда «нет»; указанный переход - двойное нажатие, необходимое для навигации

Проверено на SGII, Motorola MC40, TC55, одинаковые проблемы на всех платформах.

Используйте пользовательский стиль для верхнего, нижнего колонтитула, содержимого, удаления data-position = & quot; fixed & quot;

Используйте инициализацию JQM (знайте, поместите JSbefore JQM включить)

.header {
    position : fixed !important;
    z-index  : 10 !important;
    top      : 0 !important;
    width    : 100% !important;
}
.content {
    padding : 55px 15px !important;
}
.footer {
    position : fixed !important;
    z-index  : 10 !important;
    bottom   : 0 !important;
    width    : 100% !important;
}

//use this init

$(document).bind("mobileinit", function()
{
    $.mobile.defaultPageTransition = "fade"; //default, see styles
    $.mobile.transitionFallbacks='none';
    $.mobile.useFastClick = false; //300ms or double tap needed
});

Проблемы с отображением при переходе с одной мобильной страницы jquery на другую в Firefox

Вот пример из ответа выше:

<a href="#page1" data-transition="fade">I am good transition</a>
<a href="#page1">And I am bad</a>
 Jaume13 июн. 2012 г., 10:51
уже пытался и сделать некоторую работу вокруг этого, но не решение ...

data-position="fixed" тогда решение состоит в том, чтобы использовать:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
 25 февр. 2013 г., 08:38
Это сработало для меня! Android 4.2.1, jQM 1.3.0, Cordova 2.3.0
 25 мая 2013 г., 06:50
Это работает! Исправлена проблема с минимальными усилиями. (jQM 1.3.1, Кордова 2.4.0)
 04 мар. 2013 г., 20:14
Это помогло избавиться от мерцания между страницами ... и сократило время, в течение которого панель URL всплывает и возвращается обратно. Однако это еще не все.
 04 мар. 2013 г., 20:20
Кстати, «причина» мое мерцание после этого исправления связано с тем, что моя панель инструментов с фиксированным заголовком имеет 2 строки (вместо обычной 1 строки). Есть хорошие идеи, как это исправить?

Ваш ответ на вопрос