CSS - skew and fixed background veiled by background color

I'm having an issue with skew and background fixed in Chrome and Firefox. As I have noticed here the problem is not only in my case.

.product {
    width: 100%;
    height: 400px;
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    background-attachment: fixed !important;
    background-position: 50% 0;
    background-size: auto 150%;
    background-repeat: no-repeat;
    padding-bottom: 16em;
    text-align: left;
    position: relative;
    z-index: 0;
}
.product div {
    -webkit-transform: skewY(-5deg);
}

As you can see in the jsfiddle Sam Selikoff created, you can see that while scrolling down the fixed background is not displayed in the right corner of the photo. There is background-color triangle veiling the fixed background.

The funny thing is here: if you remove background-attachment: fixed, skew is working fine.

I tested this in Safari as well and it handled it properly.

via Chebli Mohamed