奇怪的Microsoft Edge行为:当存在许多背景元素时,输入字段文本条目变得迟缓(以及更多)

Question

这是一个JSFiddle,它演示了我在下面描述的内容

我一直试图追踪一个奇怪的边缘渲染问题.我无法重现这个问题,但我能够重现一些我认为直接相关的奇怪行为.我有一些背景技巧,我在一些完整页面和一些页面标题上使用,涉及创建一堆随机<div>具有非常低的不透明度(即几乎透明)元素,然后随机转换它们.这有点愚蠢,但它一直在为我工作,在Firefox和Chrome中没有任何问题.

我最近开始在Edge中进行测试(一般测试;没有具体的背景知识,我没有花时间考虑正常),很快就注意到,随机地,用简单的方法将事情搞得一团糟 :hover样式转移(例如,变暗按钮背景)颜色)会导致几乎不透明的灰色框显示覆盖元素.灰色框会在不可预测的时间内停留,然后随机消失.有时它只发生在页面上的几个元素上,有时甚至完全没有.

你可以想象的一直让我疯狂,部分原因是因为我无法在CodePen或JSFiddle中重现它.在尝试调查时,我开始注意到在一个受影响的页面上输入输入字段(实际上是登录页面)非常缓慢.我正在使用VirtualBox VM(不是一个因素,我不认为,因为本机Windows 10的同事看到了完全相同的问题)所以我原本认为这只是延迟,但过了一会儿就变成了明确表示不是.

在几次尝试随机更改某些内容以查看正在发生的事情之一时,我禁用了随机<div>背景,灰盒问题和缓慢的输入问题都消失了.

上面链接的小提琴比实际设置稍微简单,但并不多.这是简单的标记:

<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仍然有奇怪的"hasLayout"的东西吗？)

我可能最终只会嗅到Edge(这看起来真的很难过),因为我无法想到任何"特征检测"方法来解决这个问题.

还有人见过吗？到目前为止我还没有提到它.

编辑我想我在IE11中看到缓慢的输入问题,但我无法重现那里的灰盒子问题.

Answer 1

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

我的第一个想法是，问题源于具有独特样式属性的元素数量过多，但奇怪的是，问题似乎与 sdiv与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>

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