我正在处理复杂的控件,我们在移动版Safari中发现了RTL模式(仅限)的错误。现在我已经将功能剥离到基本div容器(似乎jsfiddle不支持RTL模式)。
RTL(问题): http://markuskonrad.de/concepts/overflow/overflowissue-rtl.html
LTR(常规 - 无问题): http://markuskonrad.de/concepts/overflow/overflowissue-ltr.html
经过测试的设备:
是否有可能存在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);
}
谢谢和BR, 马库斯