Принудительная отрисовка всей страницы в Mobile Safari?
Есть ли способ принудительно отрисовывать / обновлять все элементы страницы (даже те, которые находятся вне экрана) в Mobile Safari?
Я создаю приложение, использующее PhoneGap , и у меня возникли проблемы на iOS при попытке обновить номер через JS, который находится в элементе DOM, "хранящемся" за пределами экрана. Элемент находится внутри HTML, но находится за пределами экрана до тех пор, пока не потребуется нажатием кнопки. Когда я нажимаю кнопку, чтобы отобразить номер, для повторного появления элемента требуется вечность.
Я заметил, что Mobile Safari любит отображать элементы страницы (или даже части элементов) так, как они видны на экране. Например, вы можете увеличить изображение, и оно отобразит только ту часть, которая видна, и если вы прокрутите другой раздел, который не был виден, он теперь начнет визуализацию (что требует времени).
Я просто заменяю содержимое с новой строкой (числом), но если находится за пределами экрана, кажется, что он не обновляется, пока я не вызову его на экране, что затем требует дополнительного времени для обновления.
Есть ли какое-нибудь исправление / обходной путь, или мне следует попытаться решить эту проблему в будущем? Мне кажется довольно странным, что я не могу динамически изменять элементы за кадром и при необходимости возвращать их на экран ...
HTML:
menu_menu размещается за кадром путем позиционирования. Затем он вставляется при нажатии кнопки. Когда menu_menu пытается сдвинуться, оно пыхтит, поскольку элемент span не появляется сначала. Затем он медленно отображается, и слайд-анимация завершается.
Я попытался не использовать скользящую анимацию, и результат остался тем же. Элемент не отображается достаточно быстро, поэтому весь контейнер не появляется в разумные сроки.
JavaScript, обновляющий элемент:
if(aTilesHit == 0){
pct = 100;
}else{
pct = Math.round((abTilesHit/aTilesHit)*100);
}
x$('#hit_pct').inner(''+pct+' 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');
}
Спасибо, t динамически изменять элементы за кадром и при необходимости возвращать их обратно на экран ...
HTML:
menu_menu размещается за экраном путем позиционирования. Затем он вставляется при нажатии кнопки. Когда menu_menu пытается сдвинуться, оно пыхтит, поскольку элемент span не появляется сначала. Затем он медленно отображается, и слайд-анимация завершается.
Я попытался не использовать скользящую анимацию, и результат остался тем же. Элемент не отображается достаточно быстро, поэтому весь контейнер не появляется в разумные сроки.
JavaScript, обновляющий элемент:
if(aTilesHit == 0){
pct = 100;
}else{
pct = Math.round((abTilesHit/aTilesHit)*100);
}
x$('#hit_pct').inner(''+pct+' 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');
}
Спасибо, t динамически изменять элементы за кадром и при необходимости возвращать их обратно на экран ...
HTML:
menu_menu размещается за экраном путем позиционирования. Затем он вставляется при нажатии кнопки. Когда menu_menu пытается сдвинуться, оно пыхтит, поскольку элемент span не появляется сначала. Затем он медленно отображается, и слайд-анимация завершается.
Я попытался не использовать скользящую анимацию, и результат остался тем же. Элемент не отображается достаточно быстро, поэтому весь контейнер не появляется в разумные сроки.
JavaScript, обновляющий элемент:
if(aTilesHit == 0){
pct = 100;
}else{
pct = Math.round((abTilesHit/aTilesHit)*100);
}
x$('#hit_pct').inner(''+pct+' 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');
}
Спасибо, Затем он медленно отображается, и слайд-анимация завершается.
Я попытался не использовать скользящую анимацию, и результат остался тем же. Элемент не отображается достаточно быстро, поэтому весь контейнер не появляется в разумные сроки.
JavaScript, обновляющий элемент:
if(aTilesHit == 0){
pct = 100;
}else{
pct = Math.round((abTilesHit/aTilesHit)*100);
}
x$('#hit_pct').inner(''+pct+' 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');
}
Спасибо, Затем он медленно отображается, и слайд-анимация завершается.
Я попытался не использовать скользящую анимацию, и результат остался тем же. Элемент не отображается достаточно быстро, поэтому весь контейнер не появляется в разумные сроки.
JavaScript, обновляющий элемент:
if(aTilesHit == 0){
pct = 100;
}else{
pct = Math.round((abTilesHit/aTilesHit)*100);
}
x$('#hit_pct').inner(''+pct+' 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');
}
Спасибо, Jordan
Примечание. Этого не происходит в браузере Android, поэтому я считаю, что это напрямую связано с тем, как Mobile Safari обрабатывает отрисовку страниц.