Seltsames Microsoft Edge-Verhalten: Eingabefeld Texteingabe wird träge, wenn viele Hintergrundelemente vorhanden sind (und mehr)

Hier ist ein JSFiddle, der demonstriert, was ich unten beschreibe

Ich habe versucht, ein seltsames Edge-Rendering-Problem zu finden. Ich war nicht in der Lage, das Problem zu reproduzieren, aber ich konnte einige seltsame Verhaltensweisen reproduzieren, von denen ich denke, dass sie direkt damit zusammenhängen. Ich habe einen Hintergrundtrick, den ich auf einigen ganzen Seiten und einigen Seitenheadern verwende, bei denen eine Reihe zufälliger <div> -Elemente mit sehr geringer Deckkraft (also fast transparent) erstellt und anschließend zufällig umgestaltet werden. Es ist irgendwie dumm, aber es funktioniert für mich ohne Probleme in Firefox und Chrome für eine Weile.

Ich habe vor kurzem angefangen, in Edge zu testen (allgemeine Tests; nichts Spezifisches über den Hintergrund, über das ich nicht regelmäßig nachdenke), und habe sehr schnell bemerkt, dass man zufällig mit einfachen :hover style shifts über Dinge hinwegfährt (wie, dunkle Hintergrundfarbe) würde eine fast undurchsichtige graue Box erscheinen lassen, die das Element bedeckt. Die graue Box würde für eine unvorhersehbare Zeit bleiben und dann nach dem Zufallsprinzip weggehen. Es geschah manchmal auf nur ein paar Elemente auf der Seite und manchmal gar nicht.

Das, wie Sie sich vorstellen können, hat mich verrückt gemacht, teilweise weil ich es nicht in einem CodePen oder JSFiddle reproduzieren kann. Während ich zu untersuchen versuchte, bemerkte ich, dass das Eintippen in ein Eingabefeld auf einer betroffenen Seite (die Anmeldeseite tatsächlich) sehr träge war. Ich benutze dafür eine VirtualBox-VM (kein Faktor, glaube ich nicht, da ein Kollege mit nativem Windows 10 genau dieselben Probleme sieht), also dachte ich ursprünglich, es sei nur Latenz, aber nach einer Weile wurde es klar, dass es nicht war.

Bei einem von mehreren Versuchen, etwas zufällig zu ändern, um zu sehen, was vor sich ging, deaktivierte ich den zufälligen <div> Hintergrund, und sowohl das Gray-Box-Problem als auch das träge Eingabeproblem verschwanden.

Die oben verlinkte Geige ist ein wenig einfacher als das reale Setup, aber nicht viel. Es ist einfaches Markup:

und dann ein paar CSS:

Das JavaScript zum Erstellen der Formen ist ebenfalls einfach:

(Auf meiner realen Seite mache ich nur ungefähr 100 zufällige Elemente.)

In Firefox und Chrome ist das Eingabefeld völlig unabhängig von der Anwesenheit (oder Abwesenheit) der Hintergrundelemente. In Edge gibt es jedoch eine deutliche Verzögerung bei der Eingabe in das Eingabefeld, wenn die Elemente sichtbar sind. Es ist, als ob der Renderer versucht, eine Art Kollisionsberechnung durchzuführen, da er die <input> -Anzeige aktualisiert, wenn sich der Wert ändert.

Ich wünschte, ich könnte das noch seltsamere Gray-Box-Problem reproduzieren, aber ich war nicht erfolgreich. Es ist eindeutig ein Rendering-Bug, ähnlich wie viele, die ich in den Jahren mit dem Vorgänger-IE gesehen habe, da die Manifestation viel Zufälligkeit beinhaltet und scheinbar uninteressante Ereignisse (wie das Fenster den Fokus verliert oder zufällige Mausbewegungen) Änderungen auslösen. Es ist ein wenig merkwürdig, dass Edge unter einem solchen Problem leidet, aber dann vielleicht nicht. (Hat Edge immer noch das komische "hasLayout" Ding?)

Ich werde wahrscheinlich am Ende nur nach Edge schnüffeln (was sehr traurig scheint), weil ich mir keinen "Feature-Detect" -Ansatz für das Problem vorstellen kann.

Hat sonst jemand das gesehen? Ich habe es bis jetzt nicht erwähnt.

edit Ich denke, ich sehe das Problem der langsamen Eingabe in IE11, aber ich kann das graue Kastenproblem dort nicht reproduzieren.