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:

normal trees

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

Popular posts from this blog

How to understand 2 main() functions after using uftrace to profile the C++ program? -

c# - Update a combobox from a presenter (MVP) -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -