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

时间:2015-07-01 14:10:18

标签: html ios css webkit right-to-left

我正在处理复杂的控件,我们在移动版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, 马库斯

0 个答案:

没有答案