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/

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