javascript - Bizarre Microsoft Edge behavior: input field text entry gets sluggish when many background elements are present (and more) -

here jsfiddle demonstrates describe below

i've been trying track down weird edge rendering issue. have not been able reproduce problem, have been able reproduce odd behavior think directly related. i've got background trick use on full pages , page headers involves creating bunch of random <div> elements low opacity (that is, transparent) , randomly transforming them around. it's sort-of dumb it's been working me without issue in firefox , chrome while.

i started testing in edge (general testing; nothing specific background, don't spend time thinking normally), , noticed that, randomly, mousing on things simple :hover style shifts (like, darkening button background color) cause nearly-opaque gray box show covering element. gray box stick around unpredictable amount of time, , go away randomly. happened on few elements on page, , not @ all.

that can imagine has been making me crazy, partly because cannot reproduce in codepen or jsfiddle. while trying investigate, started noticing typing input field on 1 affected page (the login page in fact) extremely sluggish. i'm using virtualbox vm (not factor, don't think, coworker native windows 10 sees same problems) thought latency through that, after while became clear wasn't.

on 1 of several attempts randomly change see going on, disabled random <div> background, , both gray box problem , sluggish input problem went away.

the fiddle linked above little simpler real setup, not much. it's simple markup:

<div class=container>     <input>     <br>     <button class=toggle>toggle background</button> </div> 

and css:

body {     background-color: blue;     text-align: center; } .container {     position: relative;     display: inline-block;     margin-top: 100px; } .shape {     position: absolute;     background-color: white; } .noshapes .shape {     display: none; } 

the javascript make shapes simple:

for (var = 0; < 2000; ++i) {     $("<div/>", {         "class": "shape",         css: {             transform: "translate(" + math.random() * 1000 + "px, " + math.random() * 1000 + "px)",             opacity: math.random() * 5 / 100,             height: math.random() * 200 + "px",             width: math.random() * 200 + "px"         }     }).prependto("body"); } 

(on real page, make 100 random elements.)

on firefox , chrome, input box unaffected presence (or absence) of background elements. however, in edge, there's distinct lag when typing input field when elements visible. it's if renderer trying sort of collision calculation updates <input> display value changes.

i wish reproduce weirder gray box problem, haven't been successful. it's rendering bug, many i've seen on years predecessor ie in manifestation involves lot of randomness, , seemingly uninteresting events (like window losing focus, or random mouse movements even) trigger changes. it's little odd edge suffer such issue, maybe not. (does edge still have weird "haslayout" thing?)

i'll end sniffing edge (which seems sad) because can't think of "feature detect" approach problem.

anybody else seen this? haven't found mention of far.

edit think see slow input issue in ie11, cannot reproduce gray box problem there.

i can confirm seeing same behavior.

my first thought problem stemmed shear number of elements unique style attributes, curiously, problem seems related divs overlapping input.

if adjust code elements come afterwards, problem goes away entirely.

var b = document.body;  (var = 0; < 2000; ++i) {    var div = document.createelement("div");    div.classname = "shape";    div.style.transform = "translate(" + math.random() * 1000 + "px, " + math.random() * 1000 + "px)";    div.style.opacity = math.random() * 5 / 100;    div.style.height = math.random() * 200 + "px";    div.style.width = math.random() * 200 + "px";    b.appendchild(div);  }  document.queryselector(".toggle").onclick = function() {    document.body.classname = document.body.classname == "noshapes" ? "" : "noshapes";  }

body {    background-color: blue;    text-align: center;  }  .container {    position: relative;    display: inline-block;    margin-top: 100px;  }  .shape {    position: absolute;    background-color: white;  }  .noshapes .shape {    display: none;  }

<div class=container>    <input>    <br>    <button class=toggle>toggle background</button>  </div>

i believe avoid problem retain visual layout, might able modify logic determining translation , height/width pixels prevent elements intersecting container.