html - Div with repeated background does not render proprely in IE/Edge -
i have div :
<div id="trees"></div> formatted css:
#trees { width: 100%; position: absolute; top: 37%; height: 40%; background: url("/img/tree.png") repeat-x; background-size: auto 100%; } it works fine in browsers tested, result:

except in ie/edge, looks this:
trees color glitches: 
the weirdest part issue not affect other divs configured background images train tracks or mountains... have search lot on , couldn't seem find answer anywhere. tried convert image png gif , got same result. how fix ie/edge compatibility?
here codepen reproducing problem in edge: https://codepen.io/darthmooguy/pen/gmnwwg
i having same issue you, , whilst doesn't resolve cause of issue, i've found adding transparent padding edges of image , increasing background size usable workaround in many cases.
https://codepen.io/anon/pen/brwxbr adding following scaled background, set appropriate level.
background-size: auto 250%; background-position: center center; please ignore colour change - wondering if specific colour triggered based on initial problem, did not.
i might @ further workaround here not solve issue. :)
Comments
Post a Comment