Мобильный мерцающий вопрос iphone jquery

Я сталкиваюсь с проблемой мерцания на iPhone с помощью приложения, разработанного с использованием jQuery mobile. Я попробовал несколько решений, доступных в Интернете, включая изменения CSS, установив переходы на «none» и даже комментируя код в jquerymobile.js. Но не повезло ... Файлы JS и CSS, которые я использую, приведены ниже:

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<link rel="stylesheet" href="jquery.mobile.structure-1.1.0.min.css" />

Любая помощь в этом будет принята с благодарностью. Благодарю.

3
nl ja de

4 ответы

While I was searching for flickering header and footer during transitions I've found this SO thread as well as: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

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

<div id="sell" data-role="page" > 
    <div data-role="header" data-id="header" data-position="fixed">
        

Seconds.me

        Back
    </div>

      

1

      2

  </div>  

  <div id="buy" data-role="page" > 
    <div data-role="header" data-id="header" data-position="fixed">
        

Seconds.me

        Back
    </div>

      

2

      1

  </div>

Мерцал, теперь мерцает. См. data-id = "header" , который одинаково для обеих страниц.

(надеюсь, что это поможет)

UPDATE: http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html --> this page also tackles flickering...

1
добавлено

Вы сделали следующее обходное решение:

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

As stated here

Важно: некоторые платформы в настоящее время имеют проблемы с переходами. Мы работаем над решением проблемы для всех. Если вы испытываете мерцания и вспышки во время или в конце перехода, мы предлагаем следующее обходное решение. Обратите внимание, что это решение должно быть проверено на целевой платформе перед развертыванием. Обходной путь, как известно, вызывает проблемы с производительностью, а также сбои браузеров на некоторых платформах, особенно Android.

0
добавлено

Попробуйте загрузить и использовать последнюю версию jQuery (1.8.2) и jQuery mobile (1.2.0) и ее CSS (1.2.0).

С уважением

0
добавлено

Здесь я прихожу с решением ........

Пожалуйста, следуйте последовательности

// First of all jQuery
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

// then load custom jQuery Mobile
<script type="text/javascript" src="mobile/js/mobile-jqm.js"></script>

// then load jQuery Mobile
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

// finally load your own scripts (.js) files 
<script type="text/javascript" src="mobile/js/script.js"></script>

To disable transitions, create mobile-jqm.js filt & inside of the mobile-jqm.js file, place this code:

$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
   defaultPageTransition: 'none'
  });
});
0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda