Large repeating background image in Internet Explorer

Question

I'm trying to have an oversized image within a viewport container presented as a background image with a repeat style on it. The below code works for Chrome and Firefox, but when looking at it in Internet Explorer (observed in 9 and 11 on multiple machines), I'm getting an odd image tear of some sort. Anybody have a solution?

HTML:

<div class="map-layer"></div>

CSS:

.map-layer {
width:4468px;
height:2016px;
background: #000000 url('http://www.thormx.com/wp-content/themes/twentyeleven-child/rvmxgp-micro/images/world-map.png') 1px -1px repeat-x;
}

http://jsfiddle.net/75r8hgdg/1/

Note: When the background x position is set to 0, the tear effect disappears, but that defeats the purpose of starting at a specified (x,y).

Answer 1

It looks like the positive x position is causing the tear (very weird, most likely a bug)

Try this instead:

<style>
    .map {
        width:4468px;
        height:2015px;      
        padding-left: 1px;
    }
    .map-layer {
        width:4468px;
        height:2016px;
        background: url('http://www.thormx.com/wp-content/themes/twentyeleven-child/rvmxgp-micro/images/world-map.png') repeat-x #000000;
        background-position: 0 -1px;
    }
</style>

<div class="map">
    <div class="map-layer">
    </div>
</div>

Answer 2

After further searching, the solution I wound up using is referenced as a workaround in a different question found here . By making the transparent image's height and width match, the artifacts go away.