Question

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

LiveDemo：http://drpdev.de/labs/example.html

<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的黑客攻击。这让我有点烦恼，但希望这仍然符合要求。

挖掘剪辑/渲染问题，我偶然发现了一个关于background-position and fixed-position elements的问题 - 答案提到-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的内容，但跳过了大部分背景。值得考虑......

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

1 个答案: