Safari与CSS“clip”渲染bug

Question

Safari与CSS“clip”渲染bug

8

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

有什么想法吗？

- Dion

1

看起来CSS效果出了一些问题，你能粘贴完整的CSS代码吗？ - Omer Farooq

我们绝对需要一个 MCVE。 - Alexander O'Mara

当然，这里有一个完整的例子 http://jsfiddle.net/uqsghon7/ - 在 JSfiddle 中可以正常工作，但在外部使用时不起作用（可能由于 iframe）：http://drpdev.de/labs/example.html - Dion

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeremy Carlson · Accepted Answer

非常有趣。

我认为我找到了答案，但它涉及到一个只适用于webkit的hack。这有点困扰我，但希望这仍然符合要求。

在寻找剪裁/渲染问题时，我偶然发现了一个关于背景定位和固定位置元素的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%)
  }
}

这里有一个演示和一个可工作的模型。

我承认我并不真正理解它为什么能够工作。但它在Chrome和Firefox上也可以工作。

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