Div with repeated background doesn't proprely in IE / Edge
I have this div:
<div id="trees"></div>
Formatted with this css:
#trees {
width: 100%;
position: absolute;
top: 37%;
height: 40%;
background: url("/img/Tree.png") repeat-x;
background-size: auto 100%;
}
It works great in all browsers I've tested with this result:
Except for IE / Edge where it looks like this:
Trees with colored glitches:
The strangest part is that this issue does not affect any other sections with similarly configured background images such as train tracks or mountains ... I searched a lot about this and could not find an answer anywhere. I also tried converting an image from png to gif and I got the same result. How do I fix this for IE / Edge compatibility?
Here is the code that reproduces the issue in Edge: https://codepen.io/darthmooguy/pen/gmNWwg
source to share
I had the same problem as you, and until that fixes the root of the problem, I found that adding a transparent padding to the edges of your image and increasing the background size is a useful workaround in many cases.
https://codepen.io/anon/pen/BRwxbR Adding the following scaled background, so set it to the appropriate level.
background-size: auto 250%;
background-position: center center;
Please ignore the color change - I was also wondering if a certain color caused its original problem, but it didn't.
I could take a look at this further, since my workaround here doesn't actually solve my problem. :)
source to share
