我在Safari中遇到以下问题：http://cl.ly/ZlJ8@H_404_2@
LiveDemo：http://drpdev.de/labs/example.html@H_404_2@
完整源代码：http://jsfiddle.net/uqsghon7/@H_404_2@
@H_404_2@
和风格：@H_404_2@
@H_404_2@
.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,0);
overflow:hidden;
}
它在Chrome和Firefox中完美运行.
在我尝试实现它之前,只有位置固定在(相对定位)div(没有第二个容器)并且溢出隐藏,它在所有浏览器但不适用于Firefox,所以我不得不用css-clip做这个解决方法…它实际上也适用于Safari,但似乎Safari的渲染引擎在滚动时不会刷新视图…@H_404_2@
有任何想法吗？@H_404_2@
最佳答案
很有意思.@H_404_2@
我想我找到了答案,但它涉及一个仅限webkit的黑客攻击.这让我有点烦恼,但希望这仍然符合要求.@H_404_2@
为了剪辑/渲染问题,我偶然发现了一个关于background-position and fixed-position elements的SO问题 – 答案提到了-webkit-mask-image作为一个仅限webkit的替代：clip：auto.@H_404_2@
它也适合你 – 只需添加以下CSS使Safari感到高兴：@H_404_2@
@H_404_2@
@media screen and (-webkit-min-device-pixel-ratio:0) {
.rowcontainer {
clip: auto;
-webkit-mask-image: -webkit-linear-gradient(top,#ffffff 0%,#ffffff 100%)
}
}
这是fiddle和working model.@H_404_2@
我承认我并不真正理解为什么它有效.但它也适用于Chrome和Firefox.@H_404_2@
