IEのすべてのバージョンで擬似要素の問題を繰り返す

Question

IE 9,10,11およびEdgeに擬似要素を含む問題があるようです。反復する背景が半透明である場合、画像は画像の残りの部分よりもかなり暗くなります（画像間に重なりがあるかのように）。それは他のすべてのブラウザでうまくいき、私はそれについての参考文献をどこにも見つけることができなかったようなユニークなものであるようです。

達成しようとしている効果は、画像を表示し、ある不透明度のパターンを上に置いて微妙なパターン効果を作り出すことです。これが実現する可能性のある方法が他にもありますが、これは最も簡単な方法です。

Image: Example of what is currently happening.

私は、迅速なCodePenの例を作りました。どのバージョンのIEやEdgeを見ても、イメージが一度いっぱいに表示されると、それが2度目に繰り返されると、イメージの前半部分はイメージの後半部分よりも目立って暗くなりますその半分はより高い不透明度を持っています。

CodePen: Example of the issue with code.

あなたが見ることができるように、非常に基本的なパターンを持つ最初の画像は結構です。しかし、第二のイメージはかなり大きく、同じ問題を抱えています。そのようなことを引き起こしている原因は何か分かりません。両方の画像がまったく同じ方法で繰り返されています。

この疑似要素のためのコードで、CSS3の面で普通のうちは何も属性がないか、トリックなど

.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

非常に奇妙なバグ。なぜこのようなことが起こるのかわからない。問題は写真にあります。たとえば、幅を1000pxに縮小すると、うまく動作します。

body { 
 
\t background-color: #232323; 
 
} 
 

 
.wrap { 
 
\t width: 100%; 
 
\t margin: 0 auto; 
 
\t float: none; 
 
\t display: block; 
 
} 
 

 
.slider2 { 
 
\t width: 100%; 
 
\t height: 200px; 
 
\t margin: 10px 0; 
 
\t padding: 10px; 
 
\t float: left; 
 
\t display: block; 
 
\t box-sizing: border-box; 
 
\t position: relative; 
 
} 
 

 
.slider2::after { 
 
\t content: ""; 
 
\t opacity: 1; 
 

 
\t width: 100%; 
 
\t height: 100%; 
 
\t display: block; 
 

 
\t background-image: url('http://i.imgur.com/tmGMRCB.png'); 
 
\t background-repeat: repeat; 
 
\t background-position: top left; 
 
\t \t 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
}

<div class="wrap"> \t 
 
\t <div class="slider2" style="background-image: url(http://img.wallpaperfolder.com/f/4A4B79479EAC/desert-sand-dunes-u6n12nvy10.jpg); background-position: top center;"> 
 
\t \t Slider 2 
 
\t </div> 
 
</div>

ソリューション：画像を変更してみてください。