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 中看到了输入缓慢的问题,但我无法在那里重现灰框问题。
最佳答案
我可以确认我看到了相同的行为。
我的第一个想法是问题源于具有独特样式属性的元素的剪切数量,但奇怪的是,这个问题似乎与 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>
我相信要避免该问题但保留视觉布局,您可以修改确定平移和高度/宽度像素的逻辑,以防止元素与您的容器相交。
关于javascript - 当 Microsoft Edge 中存在许多(以及更多)背景元素时,输入字段文本输入变得缓慢,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32874767/