jQuery Mobile мигает при переходах страниц на iPad - PullRequest
11 голосов
/ 22 октября 2011

У меня есть веб-приложение, созданное с помощью jQuery Mobile, которое прекрасно работает при использовании его в Safari на iPad. Однако, когда вы добавляете его на домашний экран, чтобы использовать его в качестве автономного приложения (с удаленной навигацией браузера, переходы страницы быстро «мигают» после каждого перехода страницы.

Я на этом гуглил и обнаружил, что мигание уже давно считалось ошибкой, и к настоящему времени должно быть исправлено. И, похоже, в Safari, но не так, как на домашнем экране. Кто-нибудь знает, что вызывает это и как это исправить?

Это как-то связано с тем, что там нет навигационной панели? Он отлично работает как автономный на iPhone, но только на iPad это происходит ...

Я бы принял в качестве ответа, даже если кто-то может показать мне, что это известная ошибка (не одна из старых ошибок, которые уже были исправлены, когда она мерцала даже в режиме Safari) или если кто-то знает об этом изнутри (никто не отвечает на мой вопрос на форуме jQuery ...). Но, конечно, мне бы понравилось, если бы кто-то действительно обошел проблему!

Ответы [ 12 ]

13 голосов
/ 18 ноября 2011

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

http://mailinglist -archive.com / rhomobile / 2011-08 / 00656-Re + ромб + страница + просмотры + и + переходы упоминает что-тоэто сработало для меня.

<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>...
7 голосов
/ 06 апреля 2012

Я нервничал из-за комментирования фокуса, но поиск в 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 голосов
/ 26 октября 2011

Редакция: следует отметить, что обсуждение ниже было смягчено с выпуском 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.

2 голосов
/ 17 мая 2013

Я исправил это с помощью:

<meta id="viewPortId" name="viewport" content="width=device-width; user-scalable=no" />
2 голосов
/ 01 декабря 2011

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

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

помогло мне.

1 голос
/ 12 сентября 2012

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

<meta id="viewPortId" name="viewport" content="width=320; user-scalable=no" />
1 голос
/ 11 мая 2012

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

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

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

1 голос
/ 01 декабря 2011

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

<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 мерцание мобильной страницы

0 голосов
/ 05 сентября 2012

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

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

для перехода данных "перевернуть" это работало, но не для "слайда"

0 голосов
/ 30 июля 2012

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

Если вы углубляетесь в страницу jquery mobileпереход вы бы знали его принцип.

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...