当 Microsoft Edge 中存在许多背景元素（以及更多）时，输入字段文本输入变得迟缓

Posted 2023-03-06

【中文标题】当 Microsoft Edge 中存在许多背景元素（以及更多）时，输入字段文本输入变得迟缓

【英文标题】：input field text entry gets sluggish when many background elements are present (and more) in Microsoft Edge

【发布时间】：2015-12-28 18:02:00

【问题描述】：

Here is a JSFiddle that demonstrates what I describe below

我一直在尝试找出一个奇怪的边缘渲染问题。我无法重现该问题，但我能够重现一些我认为直接相关的奇怪行为。我在一些整页和一些页眉上使用了一个背景技巧，包括创建一堆不透明度非常低（即几乎透明）的随机<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 会遇到这样的问题有点奇怪，但也许不会。 （Edge 还有奇怪的“hasLayout”吗？）

我可能最终只是嗅探 Edge（这似乎很可悲），因为我想不出任何“特征检测”方法来解决这个问题。

其他人看到了吗？到目前为止我还没有发现它的提及。

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

【问题讨论】：

我确实注意到，当我将鼠标悬停在 Edge 中的“切换背景”按钮上时，当背景内容可见时更改按钮的背景颜色比隐藏时要慢得多。很微妙。

@Pointy 你能在connect.microsoft.com/ie上打开一个错误吗？

@Pointy 您能否提供您正在使用的 Edge 版本？我在 20.10240.16384.0 上，我无法使用您的 JSFiddle 重现该错误

@CalvT 那是同一个版本。由于我还没有弄清楚的原因，这种效果在我正在处理的实际站点上更为明显。如果您比较按住键盘上的某个键时的响应，并比较该背景是否显示，效果会很明显。

@CharlesMorris-MSFT 不，我不能 - 我已经学会避免拥有一个活跃的 Microsoft Network 帐户，因为根据我的经验，它会使我的工作相关 OWA 帐户的登录更加脆弱和奇怪比现在。如果您当然想记录问题，请随时链接到我的小提琴。

【参考方案1】：

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

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

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

【讨论】：

根据我对这种现象的经验，这是有道理的。在实际页面中，装饰元素的数量要少得多，但它们肯定会与输入字段重叠。不幸的是，重点是让它们成为装饰背景，因此重叠输入实际上是可取的。感谢您查看这个问题！

嗯，我想知道您是否会看到使用画布绘制背景而不是创建和装饰 div 的不同行为。

用画布做是我要尝试的事情清单；目前还不够重要，不必担心。