iPad Safari在RTL中滚动不当,内容广泛
cod*_*tor 11 html safari ipad right-to-left
条件如下:
- 使用iPad Safari
- 页面处于RTL(从右到左)模式(阿拉伯语语言环境)
- 页面动态加载一些比屏幕更宽的内容
- 发生奇怪的滚动行为
页面似乎向左滚动太远(参见屏幕截图),因此右侧(通常在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>
您可以按照以下步骤重现问题:
- 将此HTML复制到本地文件
- 在Chrome中打开文档,使用F12可以打开iPad模拟
按按钮进行模拟 - 然后您会注意到红色框的右边缘靠近页面中间.但是,情况应该不是这样.那个红色的盒子应该是唯一的内容,它的右边没有任何东西,所以它应该与右边缘对齐.
只有在页面加载后动态插入宽内容时才会出现此问题,因此如果页面以宽内容开始,则滚动行为似乎正常.因此代码中的setTimeout().
有任何建议/解决方法来解决这个问题吗？
编辑:您也可以直接尝试此链接来重现问题:http://www.codefactor.net/ipadissue.html
到目前为止我找到的唯一解决方案是将所有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>
注意:您可能还需要通过强制它们为0的值来删除div的边距和/或填充,#container以便在CSS框架之上构建时不会破坏您的设计.
注2:我认为这是我们可能需要报告的iPad的safari bug.当RTL的html或body标签,文本得到正确对齐,但得到的div对齐到反面(一样,如果它是一个典型的内升网页),它仅与iPad的Safari浏览器,而不是桌面版本发生.
小智 1
这是 WebKit 中的一个错误，已由https://bugs.webkit.org/show_bug.cgi?id=146872解决。
请参阅此处的更改日志： https://bugs.webkit.org/attachment.cgi ?id=256657&action=review
不过我不知道发布版本。考虑到大多数 iOS 都有浏览器更新和操作系统更新，这个问题很快就会修复（修复为 2015 年 7 月 11 日）。