Repeating pseudo element issue in all versions of IE - html

Question

There seems to be an issue in IE 9, 10, 11 and Edge with pseudo elements where if they have a repeating background that is semi-transparent, the first half of the background-image is a lot darker than the rest of the image (almost as if there is overlap between the images). It's fine in all other browsers and seems to be such a unique thing that I couldn't find any references about it anywhere.
The effect that is trying to be achieved is to have an image shown, and a pattern with a certain opacity placed over the top to create a subtle pattern effect. Whilst there are other ways that this could potentially be achieved, this seems to be the easiest way.
Image: Example of what is currently happening.
I made a quick CodePen example. If you look on any version of IE or Edge you'll notice that once the image has been displayed in full already, the second time it is repeated, the first half of the image is noticeably darker than the second half of the image as if that half has a higher opacity on it.
CodePen: Example of the issue with code.
As you can see, the first image with a very basic pattern is fine. The second image though is quite large and has the same issue and I can't figure out what is causing it to do such a thing. Both images are repeating in the exact same way.
This is the code for the pseudo element, nothing out the ordinary in terms of CSS3 attributes or tricks etc.
.element::after {
background-image: url(http://example.com/image.png);
background-repeat: repeat;
width: 100%;
height: 100%;
display: block;
content: "";
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

Answer 1

A very strange bug. No idea why this happens. The problem is in the picture. If you reduce it to 1000px in width, for example, it will work well.
body {
background-color: #232323;
}
.wrap {
width: 100%;
margin: 0 auto;
float: none;
display: block;
}
.slider2 {
width: 100%;
height: 200px;
margin: 10px 0;
padding: 10px;
float: left;
display: block;
box-sizing: border-box;
position: relative;
}
.slider2::after {
content: "";
opacity: 1;
width: 100%;
height: 100%;
display: block;
background-image: url('http://i.imgur.com/tmGMRCB.png');
background-repeat: repeat;
background-position: top left;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class="wrap">
<div class="slider2" style="background-image: url(http://img.wallpaperfolder.com/f/4A4B79479EAC/desert-sand-dunes-u6n12nvy10.jpg); background-position: top center;">
Slider 2
</div>
</div>
Solution: try to change picture.