CSS transition on element leaving lines

Question

I have placed a hover transition on an absolutely positioned element. The hover state applies a box-shadow to the heading element to mimic it filling the area (to get around the fact you cannot transition from a property set to auto).

In Chrome only, when the transition is reversed, there are a bunch of paint lines left behind on the background image. Displayed in the image below. The second tile from the left has the hover state applied.

NOTE: This also happens if I stretch the .heading element to the top by other means (by adjusting height, top , padding);

My markup for each item is as follows:

<li class="item appear">
    <a href="/link-to-page">
        <div class="thumbnail" style="background-image: url('/path-to-image.jpg')"></div>
        <h4 class="heading category-icon">{$Title}</h4>
    </a>
</li>

My SCSS (with a few bourbon mixins) is as follows:

.tiles {
    .item {
        height: 15rem;
        &.seen {
            @include appear;
            &:hover {
                .heading {
                    padding: 3rem 1rem;
                    background-color: rgba(color(blue), 0.9);
                    box-shadow: 0 -5rem 0 5rem rgba(color(blue), 0.9);
                    @include transition(all 0.5s 0s);
                    &:before {
                        opacity: 1;
                        @include transition-delay(0.5s);
                        @include transform(none);
                    }
                } 
            }
        }
        a {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 0.25rem;
            background-color: color(grey, light);
            box-shadow: 0 0 0 3px transparent; 
            overflow: hidden;
            @include transition(all 0.5s $ease-in-back);
            .thumbnail,
            .heading {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                @include transition(all 0.5s 0.5s);
            }
            .thumbnail {
                top: 0;
                @include background-cover; 
            }
            .heading {
                padding: 1rem;
                color: white;
                background-color: color(blue);
                text-align: center;
                box-shadow: 0 0 0 0 rgba(color(blue), 1);
                // Product icons loop
                @each $item in $products {
                    &.#{$item} {
                        @include icon(before, #{$item});
                    }
                }
                &:before {
                    position: absolute;
                    opacity: 0;
                    font-size: 5rem;
                    top: -4rem;
                    text-align: center;
                    right: 0;
                    left: 0;
                    @include transform(translateY(-1rem));
                    @include transition(all 0.5s 0s);
                }
            }
        }
    }
}

Any pointers would be appreciated...

Answer 1

Found a fix...

Applying -webkit-transform: translateZ(0); to the heading element seems to fix the issue.

If anyone has any better answers I am happy to still accept as this one feels like a bit of a hack.