input field text entry gets sluggish when many background elements are present (and more) in Microsoft Edge

Question

Here is a JSFiddle that demonstrates what I describe below

I've been trying to track down a weird Edge rendering issue. I have not been able to reproduce the problem, but I have been able to reproduce some odd behavior that I think is directly related. I've got a background trick I use on some full pages and some page headers that involves creating a bunch of random <div> elements with very low opacity (that is, almost transparent) and then randomly transforming them around. It's sort-of dumb but it's been working for me without any issue in Firefox and Chrome for a while.

I recently started testing in Edge (general testing; nothing specific about the background, which I don't spend any time thinking about normally), and very soon noticed that, randomly, mousing over things with simple :hover style shifts (like, darkening button background color) would cause a nearly-opaque gray box to show up covering the element. The gray box would stick around for an unpredictable amount of time, and then go away randomly. It happened sometimes on just a few elements on the page, and sometimes not at all.

That as you can imagine has been making me crazy, partly because I cannot reproduce it in a CodePen or JSFiddle. While trying to investigate, I started noticing that typing into an input field on one affected page (the login page in fact) was extremely sluggish. I'm using a VirtualBox VM for this (not a factor, I don't think, as a coworker with native Windows 10 sees exactly the same problems) so I originally thought it was just latency through that, but after a while it became clear that it wasn't.

On one of several attempts to randomly change something to see what was going on, I disabled the random <div> background, and both the gray box problem and the sluggish input problem went away.

The fiddle linked above is a little simpler than the real setup, but not much. It's simple markup:

<div class=container>
    <input>
    <br>
    <button class=toggle>Toggle Background</button>
</div>

and then some 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 to make the shapes is also simple:

for (var i = 0; i < 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 my real page, I only make about 100 random elements.)

On Firefox and Chrome, the input box is completely unaffected by the presence (or absence) of the background elements. However, in Edge, there's a distinct lag when typing into the input field when the elements are visible. It's as if the renderer is trying to do some sort of collision calculation as it updates the <input> display as the value changes.

I wish I could reproduce the even weirder gray box problem, but I haven't been successful. It's clearly a rendering bug, much like many I've seen over the years with predecessor IE in that the manifestation involves a lot of randomness, and seemingly uninteresting events (like the window losing focus, or random mouse movements even) trigger changes. It's a little odd that Edge would suffer from such an issue, but then maybe not. (Does Edge still have the weird "hasLayout" thing?)

I'll probably end up just sniffing for Edge (which seems really sad) because I can't think of any "feature detect" approach for the problem.

Anybody else seen this? I haven't found mention of it so far.

edit I think I see the slow input issue in IE11, but I cannot reproduce the gray box problem there.

Answer 1

I can confirm that I am seeing the same behavior.

My first thought was that the problem stemmed from the shear number of elements with unique style attributes, but curiously, the problem seems to be related to the divs overlapping with the input.

If you adjust the code so that the elements come afterwards, the problem goes away entirely.

var b = document.body;
for (var i = 0; i < 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 to avoid the problem but retain the visual layout, you might be able to modify your logic for determining the translation and height/width pixels to prevent the elements from intersecting with your container.