使用 -webkit-overflow-scrolling: touch 和 -webkit-transform: translate3d(0,0,0) 的 iOS Safari RTL 偏移问题

ynn*_*nok 5 html css webkit right-to-left ios

我正在处理一个复杂的控件，我们在移动 Safari 中发现了 RTL 模式（仅限）的错误。现在我已经将功能剥离到基本 div 容器（似乎 jsfiddle 不支持 RTL 模式）。

RTL（问题）：http : //markuskonrad.de/concepts/overflow/overflowissue-rtl.html

LTR（常规 - 无问题）：http : //markuskonrad.de/concepts/overflow/overflowissue-ltr.html

测试设备：

iPad 2 (iOS 8.2)
iPad 迷你 (iOS 8.3)
iPad Air (iOS 8.3)
iPhone 4 (iOS 7.1)

是否有可能存在 Safari Mobile 错误？我只在那里面临这个问题。

我知道 translate3d 是硬件加速的一种技巧，并且我们没有面临一些 scrollContent-Div 子元素的渲染问题。所以目前唯一的选择是等待对will-change属性的支持。还有其他想法吗？

HTML代码

<html dir="rtl" lang="en-US">
<head>
    <link href="Styles/overflowissue.css" rel="stylesheet" />
</head>
<body>
    <div id="scrollContainer" class="mySuiteUiScrollContainer">
        <div id="scrollContent">
            <p>
                123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_
                123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_
            </p>
        </div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

CSS代码

.mySuiteUiScrollContainer {
    clear: both;
    display: block;
    height: 100%;
    overflow: auto;
    background-color:red;
    -webkit-overflow-scrolling: touch;
}

.mySuiteUiScrollContainer > * {
    clear: both;
    float: none;
    display: inline-block;
    overflow: hidden;
    background-color:blue;
    -webkit-transform: translate3d(0 ,0 ,0);
}

Run Code Online (Sandbox Code Playgroud)

iPad Air 示例

谢谢和 BR，马库斯

归档时间：	10 年，5 月前
查看次数：	502 次
最近记录：	10 年，5 月前