CSS: strange alternation error in Internet Explorer (any version)

Question

CSS: strange alternation error in Internet Explorer (any version)

So, I have this rather large overlay that I need for tiles, and everything works as expected until I get it in Internet Explorer. In Internet Explorer, when it "tiles" horizontally, I get these odd lines that are not part of the original document.

Offensive HTML and CSS:

<html>
    <head>
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        body {
            margin: 0;
            width: 100%; 
            height: 100%;
            position: relative;
            background-color: #CCCCEF;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://dl.dropboxusercontent.com/u/177486/grit.tiny.png');
            background-position: -900px 0%;
            z-index: 1;
        }
    </head>
    <body>
        <div class="overlay"></div>
    </body>
<html>