草庐IT

html - iPad Safari 在内容广泛的 RTL 中不正确滚动

coder 2023-08-03 原文

条件如下:

  1. 使用 iPad Safari
  2. 页面处于 RTL(从右到左)模式(阿拉伯语区域设置)
  3. 页面动态加载一些比屏幕宽的内容
  4. 出现奇怪的滚动行为

页面一开始似乎向左滚动得太远(见屏幕截图)，因此右侧(在 LTR 模式下通常是左侧)朝向中间，显示的似乎是负空间。

您可以触摸并向右拖动以向左滚动以查看从屏幕外开始的一些内容，但我只能部分滚动，这使得一些内容远离左侧无法到达。

这是我正在处理的缺陷的屏幕截图:

这是一个可以重现问题的简单 HTML:

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta name="viewport" content="minimum-scale=0.25, maximum-scale=4.0, user-scalable=yes" />
</head>
<body style="background-color:grey">
<script src="http://code.jquery.com/jquery.js"></script>
<script>
    setTimeout(function(){
        $('<div style="width:2000px;background-color:red">test</div>').appendTo('body');
    },1000);
</script>
</body>
</html>

重现问题的步骤:

  1. 将此 HTML 复制到本地文件
  2. 在 Chrome 中打开文档，使用 F12 可以打开 iPad 模拟

按下按钮进行模拟 - 然后您会注意到红色框的右边缘靠近页面中间。然而，事实并非如此。那个红框应该是唯一的内容，它的右边没有任何东西，所以它应该与右边缘对齐。

此问题也只会在页面加载后动态插入宽内容时发生，因此如果页面以宽内容开始，滚动行为似乎是正常的。因此代码中的 setTimeout()。

解决此问题的任何建议/解决方法？

编辑: 您也可以直接尝试此链接重现问题:http://www.codefactor.net/ipadissue.html

最佳答案

到目前为止，我找到的唯一解决方案是将所有 rtl 内容放在 container div 中。 这使得示例代码按预期工作，并且也应该对所有子内容执行此操作。

(我在 chrome 开发工具中测试了 iPad、chrome、safari 桌面和其他一些模拟设备)

所以只需将所有内容放入其中:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimum-scale=0.25, maximum-scale=4.0, user-scalable=yes" />

</head>

<body style="background-color:grey">


    <div dir="rtl" id="container"></div>


<script src="http://code.jquery.com/jquery.js"></script>
<script>
    setTimeout(function(){
        $('<div style="width:2000px;background-color:red">test</div>').appendTo('#container');
    },1000);
</script>
</body>
</html>

注意:您可能还需要移除 #container div 的 ma​​rgins 和/或 paddings，方法是按顺序强制它们为 0s 值如果构建在 CSS 框架之上，则不会特别破坏您的设计。

注意 2:我认为这是我们可能需要报告的 iPad 的 safari 错误。 当 rtl html 或 body 标签时，文本正确对齐但 div 对齐到错误的一侧(就像它在里面一个经典的 ltr 网页)并且它只发生在 iPad 的 Safari 上，而不是桌面版本。

关于html - iPad Safari 在内容广泛的 RTL 中不正确滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31440580/

不正在内stronggtlthtmlipadsafariright-to-left

有关html - iPad Safari 在内容广泛的 RTL 中不正确滚动的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量？ - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用？ 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上，我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解)，但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行，然后我尝试添加评论。靠我自己，我设法让它进入了可以从script/console添加评论的阶段，但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作，以添加评论。我的问题是:这是“标准”方式吗？我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗？ - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件，但是当我生成RDoc时，自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件？它可以配置为自动检测文件后缀的格式吗？(例如README.textile通过RedCloth运行，但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件，只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

  8. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项？ - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

  9. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  10. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

随机推荐