javascript - 当 Microsoft Edge 中存在许多(以及更多)背景元素时，输入字段文本输入变得缓慢

Question

Here is a JSFiddle that demonstrates what I describe below

我一直在尝试找出一个奇怪的 Edge 渲染问题。我无法重现该问题，但我已经能够重现一些我认为直接相关的奇怪行为。我在一些整页和一些页眉上使用了一个背景技巧，涉及创建一堆随机 <div>具有非常低不透明度(即几乎透明)的元素，然后随机变换它们。这有点愚蠢，但它在 Firefox 和 Chrome 中为我工作了一段时间，没有任何问题。

我最近开始在 Edge 中进行测试(一般测试；没有关于背景的具体信息，我通常不会花时间思考)，很快就注意到，随机地，鼠标悬停在简单的 :hover 上。样式转换(例如，使按钮背景颜色变暗)会导致出现一个几乎不透明的灰色框来覆盖该元素。灰色框会停留一段不可预测的时间，然后随机消失。它有时只发生在页面上的几个元素上，有时根本不会发生。

如您所想，这让我发疯，部分原因是我无法在 CodePen 或 JSFiddle 中重现它。在尝试调查时，我开始注意到在一个受影响的页面(实际上是登录页面)上的输入字段中输入内容非常缓慢。我正在为此使用 VirtualBox VM(我不认为这不是一个因素，因为使用 native Windows 10 的同事看到了完全相同的问题)所以我最初认为这只是延迟，但过了一会儿它变成了显然不是。

在几次尝试随机更改某些内容以查看发生了什么的尝试之一中，我禁用了随机 <div>背景，灰框问题和输入缓慢的问题都消失了。

上面链接的 fiddle 比实际设置简单一点，但也不多。这是简单的标记:

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

然后是一些 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;
}

制作形状的 JavaScript 也很简单:

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");
}

(在我的真实页面上，我只制作了大约 100 个随机元素。)

在 Firefox 和 Chrome 上，输入框完全不受背景元素存在(或不存在)的影响。但是，在 Edge 中，当元素可见时在输入字段中键入时会出现明显的滞后。就好像渲染器在更新 <input> 时试图进行某种碰撞计算。随着值的变化显示。

我希望我能重现更奇怪的灰盒问题，但我没有成功。这显然是一个渲染错误，就像我多年来在前身 IE 中看到的许多错误一样，表现形式涉及很多随机性，看似无趣的事件(例如窗口失去焦点，甚至随机鼠标移动)触发更改。 Edge 会遇到这样的问题有点奇怪，但也许不会。 (Edge 是否还有奇怪的“hasLayout”？)

我可能最终只会嗅探 Edge(这看起来真的很难过)，因为我想不出任何“特征检测”方法来解决这个问题。

还有人看过吗？到目前为止，我还没有找到它的提及。

编辑 我想我在 IE11 中看到了输入缓慢的问题，但我无法在那里重现灰框问题。

Answer 1

我可以确认我看到了相同的行为。

我的第一个想法是问题源于具有独特样式属性的元素的剪切数量，但奇怪的是，这个问题似乎与 div 与 input< 重叠有关.

如果您调整代码使元素出现在后面，问题就会完全消失。

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>

我相信要避免该问题但保留视觉布局，您可以修改确定平移和高度/宽度像素的逻辑，以防止元素与您的容器相交。