JQuery Mobile мигает при переходе страницы на iPad

Ответ 1

У меня была точно такая же проблема

http://mailinglist-archive.com/rhomobile/2011-08/00656-Re+rhomobile+page+views+and+transitions упоминает что-то, что сработало для меня.

<style>
/*** patch for jquerymobile page flicker that was happending ***/
    .ui-page {
        -webkit-backface-visibility: hidden;
    } 
</style>

Я все еще получаю мерцание на панели инструментов, поэтому я изменил свою панель инструментов на:

<ul data-theme="b" data-role="listview" style="margin-top: 0;">
     <li data-role="list-divider">Your text goes here</li>...

Ответ 2

Я нервничал из-за того, что комментировал фокус, но поиск в Google обнаружил следующий CSS, который, похоже, работает:

.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}

Оригинальная ссылка: https://github.com/jquery/jquery-mobile/issues/2856

У меня возникла проблема с переходом слайда (даже обратный слайд работал нормально. JQ 1.7.1 JQM 1.0.1 PhoneGap 1.5.0

Ответ 3

Редакция: Следует отметить, что обсуждение ниже было смягчено выпуском iOS 5.0. Это может быть частичным фактором влияния для тех, кто не обновился, но если вы используете 5.0, Nitro всегда присутствует. http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars

- оригинальный ответ - Apple представила механизм Nitro javascript в браузере Safari. Однако они только установили его в браузере, а не в UIWebView (это то, что вы получаете при запуске из главного экрана или встраиваете в приложение, такое как PhoneGap.

Были некоторые предположения, если это повышение производительности было специально опущено. http://www.mobilexweb.com/blog/apple-phonegap-html5-nitro.

Итак, если кажется, что он действительно работает медленно... это действительно так. Он не использует двигатель Nitro.

Ответ 4

Добавление этой строки

<style>
/*** patch for jquerymobile page flicker that was happending ***/
    .ui-page {
        -webkit-backface-visibility: hidden;
    } 
</style>

помог мне.

Ответ 5

Я исправил его с помощью

<meta id="viewPortId" name="viewport" content="width=device-width; user-scalable=no" />

Ответ 6

Это только частично работает для меня:

<style>
body .ui-page
{ 
     height: 100% !important; 
     -webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>

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

Что предотвращает мерцание и пробелы в нижней части страницы, но заметьте, что переходы отключены.

Кроме того, идентификаторы не используются более одного раза, что я могу проверить с помощью:

// an id used more than once??
    var ids = new Array();
    $.each($("[id]"), function () {ids.push($(this).attr("id"));});

    var matches, val1;
    for (var i = 0; i < ids.length; i++) {
        matches = 0;
        val1 = new RegExp(ids[i], "i");
        for (var i2 = 0; i2 < ids.length; i2++) {
            if (ids[i].length == ids[i2].length && val1.test(ids[i2]) == true)
                matches++;
        }
        if (matches > 1)
            alert("This id was used more than once: " + ids[i]);
    }

Также попробовали:

$.extend($.mobile, {
        metaViewportContent: "width=device-width, height=device-height, minimum-scale=1, maximum-scale=1"
    });

И загрузите страницу в DOM и только один раз, выполнив переход следующим образом:

var promise = $.mobile.loadPage(url, {
        pageContainer : $("body")
    });
    promise.done(function () {
        var newPage = $("body [data-role='page']:last").attr("id");
        $.mobile.changePage($("#" + newPage));
    });

Я все еще получаю мерцание на переходах страниц.

ответ.... jQuery мерцание страницы

Ответ 7

К сожалению, ни одно из предложений не решило проблему, по крайней мере, не для меня. Однако, наконец, он был исправлен в последней стабильной версии jQuery mobile (1.1.0), поэтому проблема, наконец, исчезла! Мне просто нужно было войти и изменить глобальный переход обратно на слайд, потому что они заставили его исчезать:

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

Надеюсь, это поможет кому-то еще, кто, возможно, не заметил обновления.

Ответ 8

Кажется, что следующий тег META решает проблему:

<meta id="viewPortId" name="viewport" content="width=320; user-scalable=no" />

Ответ 9

Это известная ошибка. См. Статью в морской почтовой рассылки.

Рольф ван дер Влётен заметил:

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

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

  ввод { схема: нет; }

Ответ 10

Из открывшейся в настоящее время проблемы "Переход страницы слайдов вызывает перерисовку экрана на iOS 5 chromeless" , рекомендуется прокомментировать страницу Title.focus() из функции reFocus.

Это, однако, не решило мою проблему. Я счел необходимым удалить как pageTitle.focus(), так и page.focus(), в основном всю функцию.

Эта проблема (и, в частности, изменение функции reFocus) также упоминается в выпуске 2474. Это исправление для iOS4, которое не решило проблему iPad iOS5.

Ответ 11

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

Если вы перейдете на перекрестный переход на страницу jQuery, вы узнаете его принцип.

Он загружает другую страницу (страницу, которую вы хотите отправить) в элемент, такой как:.

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

Я сделал приложение phonegap в iPhone 4 (ios5) и не могу исправить эту проблему. Просто молись, чтобы мобильная команда jquery быстро исправила эту ошибку. После нескольких дней на эту проблему я просто хочу fuxk jqm...

Ответ 12

Это только частично работало для меня

<style>
body .ui-page
{ 
     height: 100% !important; 
     -webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>

для перехода данных "флип" он работал, но не для "слайда"