Encountering an issue in IE 9, 10, 11, and Edge involving pseudo elements with transparent backgrounds. The problem arises when the repeating background image appears darker in the first half compared to the second half, giving the impression of overlap between images. This anomaly seems quite unique as there are no references addressing it.
The desired effect is to display an image overlaid with a semi-transparent pattern to create a subtle pattern effect. Although alternative methods exist, this approach appears to be the simplest.
Image: Example demonstrating the current issue.
A CodePen example has been created to illustrate the problem. On any version of IE or Edge, one can observe that after the image is fully displayed once, upon repetition, the initial half appears darker than the latter half as if the opacity varies in sections of the image.
CodePen: Demonstration of the issue with accompanying code.
Examining the provided examples, the first image with a basic pattern displays correctly. However, the large second image exhibits the same darkening issue, posing a challenge to identify its cause. Notably, both images repeat in identical fashion.
Reviewing the CSS for the pseudo element reveals nothing unusual in terms of attributes or tricks related to CSS3 styling.
.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;
}