Question

我正在处理复杂的控件，我们在移动版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 Mini（iOS 8.3）
iPad Air（iOS 8.3）
iPhone 4（iOS 7.1）

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

我知道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>

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);
}

iPad Air example

谢谢和BR，马库斯

iOS Safari RTL Offset问题使用-webkit-overflow-scrolling：touch和-webkit-transform：translate3d（0,0,0）

0 个答案: