使用CSS"剪辑"的Safari渲染错误

Question

我在Safari中遇到以下问题:http://cl.ly/ZlJ8

LiveDemo: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的渲染引擎在滚动时不会刷新视图...

有任何想法吗？

Answer 1

很有意思.

我想我找到了答案,但它涉及一个仅限webkit的黑客攻击.这让我有点烦恼,但希望这仍然符合要求.

为了剪切/渲染问题,我偶然发现了一个关于背景位置和固定位置元素的SO问题- 这个答案被提到-webkit-mask-image作为webkit的唯一选择clip: auto.

它也适合你 - 只需添加以下CSS使Safari感到高兴:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .rowcontainer {
    clip: auto;
    -webkit-mask-image: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 100%)
  }
}

这是一个小提琴和一个工作模型.

我承认我并不真正理解为什么它有效.但它也适用于Chrome和Firefox.

然而,IE9对此并不满意.IE11显示了div的内容,但跳过了大部分背景.值得考虑...