Принудительно выполнять полный рендеринг страниц в Mobile Safari? - PullRequest
Новая
       14

Принудительно выполнять полный рендеринг страниц в Mobile Safari?

6 голосов
/ 22 ноября 2010

Есть ли способ заставить рендеринг / обновление всех элементов страницы (даже тех, которые находятся вне экрана) в Mobile Safari?

Я создаю приложение с использованием PhoneGap и испытываю проблемы с iOS при попытке обновить номер с помощью JS, который находится в элементе DOM, «хранящемся» вне экрана. Элемент находится внутри HTML-кода, но располагается за пределами экрана до тех пор, пока не будет нажата кнопка. Когда я нажимаю кнопку, чтобы показать номер, элемент снова появляется снова.

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

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

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

HTML: 

<div class="menu_container" id="menu_menu">    
<p id="hit_pct"><span class="gold">100</span> Hit %</p>
</div><!-- /#menu_menu -->

menu_menu находится за пределами экрана путем позиционирования. Затем он скользит по нажатию кнопки. Когда menu_menu пытается сдвинуться внутрь, оно пыхтит, поскольку элемент span сначала не появляется. Затем он рендерится медленно, и анимация слайдов завершается.

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

JavaScript, который обновляет элемент: 

if(aTilesHit == 0){
   pct = 100;
}else{
   pct = Math.round((abTilesHit/aTilesHit)*100);
}
x$('#hit_pct').inner('<span class="gold">'+pct+'</span> Hit %');

JavaScript, который открывает меню: 

animationsOn = false; //Halts the animations that will be behind the menu
if(x$('.menu_button').hasClass('active')){
   close_menus();
}else{
   x$('#ingameMenus').css({'left':0}); //Positions the menu on screen
   x$('.menu_container').removeClass('hidden'); //.hidden positions the element offscreen. It does NOT add display=hidden
   x$('.menu_button').addClass('active');
}

Спасибо, Иордания

Примечание. Этого не происходит в браузере Android, поэтому я считаю, что это напрямую связано с тем, как Mobile Safari выполняет рендеринг страниц.

Ответы [ 2 ]

4 голосов
/ 19 сентября 2012

Это может быть известной проблемой рендеринга мобильного Safari.Рендеринг может быть принудительно вызван аппаратным ускорением по следующему правилу CSS: 

-webkit-transform: translate3d(0,0,0)

Обсуждается в этом вопросе: Прокрутка iPad Safari приводит к исчезновению и повторному появлению элементов HTML с задержкой

1 голос
/ 14 сентября 2011

Вы говорите, что он расположен вне экрана, можете ли вы просто скрыть элемент, используя display: none;?

Содержимое элемента будет по-прежнему доступно через JavaScript, но не будет отображаться на экране.

...