Переходы страницы JQuery-Mobile - мерцание (отдельные страницы)

Question

Я провожу день, выясняя, как исправить мерцание между переходами страниц в JQuery-Mobile 1.3.1.

Я обнаружил, что

.ui-page { -webkit-backface-visibility: hidden; } 

или установив data-transition в none

или удаление meta.attr("content", disabledZoom); и meta.attr("content", enabledZoom); из JQM файла

помог.

Но, по-видимому, это работает только в том случае, если webapp является только одной «многостраничной».

Я использую 4 отдельные страницы.

В iOS (мобильное Safari) и на ПК (браузер: Chrome) У меня нет мерцания перехода. Но как только я добавляю приложение в Homescreen, он снова мерцает.

Здесь я прочитал, что нет никакой возможности избежать страниц мигания для (PhoneGap/Homescreenapp), если есть отдельные HTML-файлы в использовании: https://groups.google.com/d/msg/phonegap/tqdv3tYIj_o/qfft32VbLg8J

Нет ли решение для этого?

Answer 1

работы вокруг решения

Таким образом, эти вещи я пытался:

• data-transition="none"/$.mobile.defaultPageTransition = 'none';
• .ui-page { backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Chrome and Safari */ -moz-backface-visibility: hidden; /* Firefox */ }
• удалить meta.attr("content", disabledZoom); & meta.attr("content", enabledZoom); в jquery.mobile.js
• -webkit-transform:translate3d(0,0,0);
• data-position="fixed" верхних/нижних колонтитулов
• деактивация масштаба пользователя в мета-теги

Он не работал "Homescreen-App"/"PhoneGap-App" Я также применил body{ background-color: black !important }, чтобы сделать мигание более утонченным, которое сработало, но все еще было некрасиво.

Таким образом, я нашел решение для работы: jQuery 1.1.0 RC2 и jQuery 1.7.1: не мерцает, когда для передачи данных установлено значение none.

Answer 2

Это известная проблема.

Отключение/включение zoom ПЕРЕД каждой переходом на страницу решат проблему.

Answer 3

Ничего не до сих пор работало для меня. В результате я привязал функцию ко всем ссылкам или элементам, которые вызывают изменение страницы. В этой функции я запускаю изменение страницы, но прямо говорю «нет» для перехода.

Вот пример:

Javscript (JQuery)

$('.item-navbar-people').on('tap', function (e) { 
    $.mobile.changePage("#page-people", { transition: "none" }); 
}); 

Markup

<div data-role="navbar"> 
    <ul> 
    <li><a class="item-navbar-people ui-btn-active">People</a></li> 
    </ul> 
</div> 

Надеется, что это помогает!

Answer 4

Я потратил несколько недель на то, чтобы попробовать все предлагаемые решения в Интернете, что работает для jquery.mobile-1.3.2, Android 4.1.2, phonegap 2.9.0 - удалить эти строки в jquery.mobile-1.3.2.js файл

meta.attr(“content”, disabledZoom); // just put // before the line 



meta.attr(“content”, enabledZoom); // just put // before the line 

Это позволит устранить двойные щелчки, также

набора данных-переход между страницами при этом никто не

data-transition="none" 

(Второе исправление во время, пока вы не можете найти Солу чтобы получить пропуск оставшейся белой страницы во время перехода)

Используя это решение, не нужно удалять данные-положение = «исправлено» из верхнего или нижнего колонтитула, что является одним из помогающих решений, но влияет на дизайн интерфейса.

Источник: комментарии по http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html

Answer 5

У меня была такая же проблема, и то, что ускорило вещи и устранены мерцающий эффект реализации fastclick.js найти здесь: https://github.com/ftlabs/fastclick.

После связывания с .js файла,

Добавить

<script> 
    $(function() { 
     FastClick.attach(document.body); 
    }); 
</script> 

к главе документа.

Voila. Это помогло мне, надеюсь, это тоже поможет!