Anti-Aliasing issue in Chrome when using Transform CSS

Question

I'm running into this anti-aliasing Chrome bug that I can't seem to work out.

I have two types of containers being rotated with the transform property. Type A has a solid color background. Type B has an image background with a background-attachment:fixed property to force it to line up with the background image of the container it's on top of.

Both types rendered a jagged edge in Chrome after being rotated. The jagged edge on type A was solved with -webkit-backface-visibilty: hidden;, so I don't need any help on that one. However, I had no such luck with that trick on container Type B. Using that class broke the background image and fixed image 'parallax' functionality.

I've tried just about every remedy I can find on various forums and keep striking out. Anybody have any ideas as to how to clean this up? Example below, easiest to see on the bottom edge of the image container in Chrome (I'm in version 44.0.2403.130 (64-bit))!

HTML

<div class="spacer"></div>
<div class="content">
    <div class="back" style="background-image:url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');">
        <div class="bottom-divider"></div>
    </div>
</div>
<div class="spacer"></div>

CSS

body {
    margin: 0;
    padding: 0;
}
.content {
    position: relative;
    margin-bottom: 250px;
    z-index: 9999;
}
.back {
    min-height: 500px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}
.spacer {
    height: 200px;
    background-color:#191919;
    position: relative;
    z-index:9;
}
.bottom-divider::before {
    background-image: url('https://cbshouston.files.wordpress.com/2013/03/137153916-1.jpg');
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    content:" ";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    -webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
.bottom-divider {
    bottom: -50px;
    margin-top: -63px;
    transform: rotate(2deg);
    -webkit-transform:rotate(2deg);
    z-index: 99;
    margin-left: 0;
    width: 110%;
    position: absolute;
    bottom: -57px;
    overflow: hidden;
    height: 77px;
}

https://jsfiddle.net/raf8mb04/

Answer 1

Use -webkit-backface-visibility: hidden;

DEMO