Question

条件如下：

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

页面开始看似向左滚动太远（参见屏幕截图），因此右侧（通常在LTR模式下左侧）朝向中间，而是显示负空间。

你可以触摸 - 向右拖动向左滚动以查看从屏幕外开始的一些内容，但我只能向内部滚动，这会使一些内容远离左边，这是不可能的。

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

Screenshot of the initial state

这是一个可以重现问题的简单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复制到本地文件
使用F12在Chrome中打开文档，您可以启用iPad模拟

Chrome emulation

按按钮进行模拟 - 然后您会注意到红色框的右边缘靠近页面中间。但是，情况应该不是这样。那个红色的盒子应该是唯一的内容，它的右边没有任何东西，所以它应该与右边缘对齐。

只有在页面加载后动态插入宽内容时才会出现此问题，因此如果页面以宽内容开始，则滚动行为似乎正常。因此代码中的setTimeout（）。

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

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

Answer 1

我到目前为止找到的唯一解决方案是将所有 rtl 内容放在容器 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的边距和/或填充，强制它们为0的值，以免破坏您的特别设计如果构建在CSS框架之上。

注意2：我认为这是我们可能需要报告的iPad的Safari版本。当 rtl html或body标记时，文字会正确对齐，但div会对齐错误的一边（就像是在经典 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

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

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

我不知道发布版本。考虑到大多数iOS都有操作系统更新的浏览器更新，这很快就会修补（修复为2015-7-11）。

Answer 4

This is because you are using an image replacement technique that involve using text-indent with a huge negative value. That doesn't work well with RTL, the browser do not understand it like we treat it in LTR. Make sure that element have 'overflow:hidden;' and that will fix the issue.

iPad Safari在RTL中滚动不当，内容广泛

4 个答案: