使用 CSS“剪辑”的 Safari 渲染错误

Question

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 的渲染引擎在滚动时没有刷新视图...

有什么想法吗？

Answer 1

非常有趣。

我想我找到了答案，但它涉及一个仅限 webkit 的 hack。这让我有些烦恼，但希望这仍然符合要求。

在四处寻找剪辑/渲染问题时，我偶然发现了一个关于 background-position and fixed-position elements 的 SO 问题——答案提到 -webkit-mask-image 作为 clip: auto 的仅 webkit 替代品。

它也适用于您——只需添加以下 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%)
  }
}

这是fiddle 和working model。

我承认我真的不明白 为什么 它有效。但它也适用于 Chrome 和 Firefox。

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