Anti-aliasing issue in Chrome when using Transform CSS

Question

Anti-aliasing issue in Chrome when using Transform CSS

I am facing this Chrome bug with an error that I cannot work with.

I have two types of containers that rotate with a transform property. Type A has a solid background color. Type B has a background-anchored image: a fixed property to make it line up with the background-image of the container on top of it.

Both types displayed 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 help with that. However, I didn't have that much luck with this trick in a type B container. Using this class broke the background and fixed parallax functionality.

I have tried almost every tool I can find on various forums and continue to succeed. Anyone have any ideas on how to clean this up? The example below is easiest to see at the bottom edge of the image container in Chrome (I'm at 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;
}