CSS“clip”的 Safari 渲染错误

我在使用 Safari 时遇到以下问题：http://cl.ly/ZlJ8 http://cl.ly/ZlJ8

现场演示：http://drpdev.de/labs/example.html http://drpdev.de/labs/example.html

完整源代码：http://jsfiddle.net/uqsghon7/ 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 的渲染引擎在滚动时不会刷新视图...

有任何想法吗？

很有意思。

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

在挖掘剪切/渲染问题时，我偶然发现了一个关于背景位置和固定位置元素 https://stackoverflow.com/questions/23571578/chrome-issue-with-background-attachment-fixed-and-position-fixed-elements——提到的答案-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%)
  }
}

这里有一个fiddle http://jsfiddle.net/eyesofjeremy/5a6btpz6/ and a 工作模式 http://jeremycarlson.com/example/fixed-hidden.htm.

我承认我真的不太明白why有用。但它也适用于 Chrome 和 Firefox。

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