CSS "clip" 的 Safari 渲染错误

Question

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

<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 中无效，所以我不得不使用 [=29 来解决这个问题=]-clip...它实际上也适用于 Safari，但似乎 Safari 的渲染引擎在滚动时没有刷新视图...

有什么想法吗？

Answer 1

非常有趣。

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

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

它也适用于您——只需添加以下 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 and a working model.

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

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

CSS "clip" 的 Safari 渲染错误

Safari rendering bug with CSS "clip"

html

css

safari

firefox

rendering