Javascript 当Microsoft Edge中存在多个（或更多）背景元素时，输入字段文本输入会变慢

我一直在努力追踪一个奇怪的边缘渲染问题。我无法重现这个问题，但我已经重现了一些我认为直接相关的奇怪行为。我在一些完整的页面和一些页面标题上使用了一个背景技巧，包括创建一组透明度非常低（即几乎透明）的随机

元素，然后随机变换它们。这有点傻，但它在Firefox和Chrome上运行了一段时间，没有任何问题

我最近开始在Edge中进行测试（一般测试；没有任何关于背景的具体内容，我通常不会花时间去考虑），很快我就注意到，随机地，用简单的

：hover

样式切换（比如，使按钮背景颜色变暗）将导致一个几乎不透明的灰色框出现在元素上。灰色框会在不可预测的时间内停留，然后随机消失。它有时只发生在页面上的几个元素上，有时根本不发生

正如你所想象的，这让我疯狂，部分原因是我无法在代码笔或JSFIDLE中复制它。在尝试调查时，我开始注意到在一个受影响页面（实际上是登录页面）的输入字段中键入内容非常缓慢。我正在为此使用VirtualBox虚拟机（我不认为这是一个因素，因为本机Windows 10的同事也看到了完全相同的问题），所以我最初认为这只是延迟，但过了一段时间后，很明显不是

在多次尝试随机更改某些内容以查看发生了什么时，我禁用了随机

背景，灰盒问题和缓慢输入问题都消失了

上面链接的小提琴比实际的设置简单一点，但不多。这是一个简单的标记：

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

制作形状的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");
}

for（变量i=0；i<2000；++i）{
$("", {
“类”：“形状”，
css:{
转换：“translate（“+Math.random（）*1000+”px，“+Math.random（）*1000+”px）”，
不透明度：Math.random（）*5/100，
高度：Math.random（）*200+“px”，
宽度：Math.random（）*200+“px”
}
}).prependTo（“主体”）；
}

（在我的真实页面上，我只生成大约100个随机元素。）

在Firefox和Chrome上，输入框完全不受背景元素存在（或不存在）的影响。然而，在Edge中，当元素可见时，在输入字段中键入时会出现明显的延迟。这就好像渲染器试图在值更改时更新

显示时进行某种碰撞计算一样

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

我可能最终只会嗅探边缘（这似乎真的很悲哀），因为我想不出任何“特性检测”方法来解决这个问题

还有人看到这个吗？到目前为止，我还没有发现有人提到这件事

---

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

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

我的第一个想法是，问题源于具有独特样式属性的元素的数量，但奇怪的是，问题似乎与

div

s与

输入重叠有关

如果您调整代码，使元素随后出现，那么问题将完全消失


var b=document.body；
对于（变量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、 儿童组;；
}
document.querySelector（“.toggle”）.onclick=function（）{
document.body.className=document.body.className==“noshapes”？：“noshapes”；
}
正文{
背景颜色：蓝色；
文本对齐：居中；
}
.集装箱{
位置：相对位置；
显示：内联块；
边缘顶部：100px；
}
.形状{
位置：绝对位置；
背景色：白色；
}
.形状.形状{
显示：无；
}



切换背景
我在小提琴中注意到，当我将鼠标移到Edge中的“切换背景”按钮上时，当背景内容可见时，更改按钮背景颜色的速度明显慢于隐藏时。这很微妙。@Pointy你能打开一个bug吗？@Pointy你能提供你正在使用的Edge的版本吗？我在20.10240.16384.0上，无法用您的JSFiddle@CalvT那是同一个版本。由于我还没有弄清楚的原因，这种影响在我正在工作的实际站点上更为明显。如果您在键盘上按住一个键时比较响应，并在显示或不显示背景时进行比较，效果会很明显。@CharlesMorris MSFT no，我不能-我已经学会了避免使用活跃的Microsoft网络帐户，因为根据我的经验，登录我的工作相关OWA帐户比现在更脆弱、更怪异。当然，如果你想记录这个问题，请随时链接到我的小提琴。考虑到我对这一现象的经验，这是有道理的。在实际页面中
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");
}