使用CSS“剪辑”的Safari呈现错误 [英] Safari rendering bug with CSS "clip"

问题描述

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

I have the following issue with Safari: http://cl.ly/ZlJ8

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

LiveDemo: 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)

/ p>

and style:

.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的渲染引擎不刷新视图，滚动...

It works perfectly in Chrome and Firefox. Before I tried to achieve it only with position fixed inside the (relative positioned) div (without second container) and overflow hidden and it worked in all browser but not Firefox, so I had to do this workaround with css-clip... It actually works in Safari as well but it seems like Safari's render engine is not refreshing the view when scrolling...

任何想法？

推荐答案

很有意思。

我认为我找到了答案， - 只是黑客。

I think I found the answer, but it involves a webkit-only hack. That bugs me a little but hopefully this still fits the bill.

为了解决剪贴/渲染问题，我偶然发现了一个关于背景位置和固定位置元素 - 所提及的答案 -webkit-mask-image 作为剪辑：web

Digging around for clipping/rendering issues, I stumbled across an SO question regarding background-position and fixed-position elements—the answer mentioned -webkit-mask-image as a webkit-only alternative to clip: auto.

它适用于你，只是添加以下CSS使Safari快乐：

It works for you, too—just adding the following CSS makes Safari happy:

@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。

I confess I don't really understand why it works. But it works in Chrome and Firefox, too.

IE9，但是，真的不高兴。 IE11显示div的内容，但跳过了大部分的背景。值得考虑...

IE9, however, is really not happy with this. IE11 shows the content of the divs but skips most of their background. Worth considering...

这篇关于使用CSS“剪辑”的Safari呈现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！