Safari rendering bug with CSS "clip"

Question

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

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

full source code: http://jsfiddle.net/uqsghon7/

<div class="row">
  <div class="rowcontainer">
    <div class="side">
      ...
    </div>
  </div>
</div>
... (multiple times with different contents in .side)

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;
}

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...

Any ideas?

Answer 1

Very interesting.

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.

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.

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%)
  }
}

Here is a fiddle and a working model.

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

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