iPad Safari 在宽内容的 RTL 中不正确滚动

Question

条件如下：

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

页面开始时似乎向左滚动得太远（见屏幕截图），因此右侧（在 LTR 模式下通常是左侧）朝向中间并且看起来像是负数 space 改为显示。

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

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

这是一个可以重现问题的简单 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>

重现问题的步骤：

将此 HTML 复制到本地文件
在Chrome中打开文档，使用F12可以打开iPad仿真

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

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

任何advice/workaround解决这个问题？

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

Answer 1

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

(我测试了 iPad、chrome、safari 桌面和 chrome dev-tools 中的其他一些模拟设备)

所以把所有东西都放进去:

<!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>

注意：您可能还需要删除 margins and/or paddings #container div 将它们强制为 0s 值，以免破坏您的设计，特别是如果构建在 CSS 框架之上。

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

Answer 2

'在我看来问题出在您的视口元标记上。

试试这个：

<meta name="viewport" content="width=device-width, initial-scale=1">

或者像这样扩展您现有的元标记：

<meta name="viewport" content="minimum-scale=0.25, maximum-scale=4.0, user-scalable=yes, width=device-width, initial-scale=1">

Answer 3

这是因为您使用的图像替换技术涉及使用具有巨大负值的 text-indent。这不适用于 RTL，浏览器不像我们在 LTR 中那样理解它。确保该元素具有 'overflow:hidden;'，这将解决问题。

Answer 4

这是 WebKit 中的一个错误，已由 https://bugs.webkit.org/show_bug.cgi?id=146872 解决。

在此处查看更改日志： https://bugs.webkit.org/attachment.cgi?id=256657&action=review

虽然我不知道发布版本。考虑到大多数 iOS 有浏览器更新 OS 更新，这将很快修补（固定为 2015-7-11）。

iPad Safari 在宽内容的 RTL 中不正确滚动

iPad Safari improper scrolling in RTL with wide content

html

safari

ipad

right-to-left