2010-11-22 4 views
6

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

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

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

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

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

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 обрабатывает рендеринг страниц.

+0

«Когда я нажимаю на кнопку, чтобы показать номер, он принимает навсегда для элемента, чтобы вновь появиться. " Не могли бы вы отправить код действия на нажатие кнопки и часть html с этим интервалом? – atlavis 2010-11-22 21:41:25

ответ

1

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

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

4

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

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

обсуждаемого в этом вопросе: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

Смежные вопросы