我在Safari中遇到了以下问题:http://cl.ly/ZlJ8
演示链接:http://drpdev.de/labs/example.html
完整源代码:http://jsfiddle.net/uqsghon7/
<div class="row">
<div class="rowcontainer">
<div class="side">
...
</div>
</div>
</div>
... (multiple times with different contents in .side)
和样式:
.side {
height: auto;
padding-left: 50px;
margin: auto;
position: fixed;
top: 50%; left: 0; bottom: 0;
width: 350px;
...
}
.row {
...
position: relative;
overflow: hidden;
}
.rowcontainer {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
margin: 0;
clip: rect(0, auto, auto, 0);
overflow:hidden;
}
在Chrome和Firefox中完美运行。 之前我尝试只使用相对定位的div内的固定定位(不使用第二个容器)和溢出隐藏来实现它,在所有浏览器中都可以工作,但不包括Firefox,所以我必须使用css-clip进行解决... 它实际上在Safari中也可以工作,但似乎Safari的渲染引擎在滚动时没有刷新视图...
有什么想法吗?