javascript - 强制在 Mobile Safari 上呈现整页？

coder 2024-12-29 原文

有没有办法在 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 处理页面呈现的方式直接相关。

最佳答案

这可能是移动版 Safari 的已知渲染问题。可以通过使用以下 CSS 规则触发硬件加速来强制渲染:

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

在这个问题中讨论:iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

关于javascript - 强制在 Mobile Safari 上呈现整页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4249392/

有关javascript - 强制在 Mobile Safari 上呈现整页？的更多相关文章

ruby - Hanami link_to 助手只呈现最后一个元素 - 2
我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby - 强制浏览器下载文件而不是打开文件 - 2
我要下载http://foobar.com/song.mp3作为song.mp3，而不是让Chrome在其native中打开它浏览器中的播放器。我怎样才能做到这一点？最佳答案您只需要确保发送这些header:Content-Disposition:attachment;filename=song.mp3;Content-Type:application/octet-streamContent-Transfer-Encoding:binarysend_file方法为您完成:get'/:file'do|file|file=File.
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby - 强制 Ruby 不以标准形式/科学记数法/指数记数法输出 float - 2
我遇到了同样的问题here对于python，但对于ruby。我需要输出这样一个小数字:0.00001，而不是1e-5。有关我的特定问题的更多信息，我正在使用f.write("Mynumber:"+small_number.to_s+"\n")输出到一个文件对于我的问题，准确性不是什么大问题，所以只做一个if语句来检查是否small_number那么更通用的方法是什么？最佳答案 f.printf"Mynumber:%.5f\n",small_number您可以将.5(小数点右侧5位数字)替换为您喜欢的任何特定格式大小，例如，%8
ruby-on-rails - 如何在 Rails 脚手架生成器上强制使用单数表名？ - 2
我正在使用遗留数据库并需要创建一些CRUD。我如何使用scaffold生成器并告诉他表的确切名称以避免复数化过程？表格也是西类牙语。最佳答案您可以只使用ActiveRecord::Base.table_name=方法手动设置表名。因此，在您的模型中您可以:classOrderDetail 关于ruby-on-rails-如何在Rails脚手架生成器上强制使用单数表名？，我们在StackOverflow上找到一个类似的问题： https://stackove
ruby - 强制使用特定的 gem 版本作为默认版本？ - 2
假设我安装了三个gem:package-0.4.0、package-0.5.0和package-0.5.0-jbfink(我构建了-jbfink一个，因为我对0.5做了非常小的改动.0的来源，并希望将其与官方版本区分开来)。是否有gem(或其他命令)将其设为默认值？现在我已经安装了所有三个，但我的shell正在从package-0.5.0中获取可执行文件，我宁愿它默认为0.5.0-jbfink。将0.5.0-jbfink命名为0.5.1解决了这个问题，但我不想这样做，因为我不想与正式发布的0.5.1出现冲突。最佳答案转到conf
javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？最佳答案如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
ruby - 无法将 BigDecimal 强制转换为 BigDecimal - 2
这应该很简单，但它正在爆炸。有什么想法吗？d=BigDecimal.new("2.0")YAML::load({:a=>d}.to_yaml)TypeError:BigDecimalcan'tbecoercedintoBigDecimalfrom/Users/benjohnson/.rvm/rubies/ruby-1.9.3-p125/lib/ruby/1.9.1/irb/inspector.rb:86:in`inspect'from/Users/benjohnson/.rvm/rubies/ruby-1.9.3-p125/lib/ruby/1.9.1/irb/inspector.rb
ruby - 如何强制 Rack :session + sinatra to read "rack.session" from params instead of cookies - 2
我正在处理oauth1.0(twitter和flickr)。网站工作在80端口，oauth服务器工作在8080端口算法:向oauth服务器发送ajax请求以检查用户是否有有效的access_token如果用户没有access_token或access_token已过期，则打开授权窗口在oauth服务器的用户session中保存access_token发送分享数据到oauth服务器它使用sinatra+rack:session+rack::session::sequel+sqlite来存储session。它在每个响应中发送Set-Cookie:rack.session=id我正在使用2种

javascript - 强制在 Mobile Safari 上呈现整页？

有关javascript - 强制在 Mobile Safari 上呈现整页？的更多相关文章

随机推荐