Warum friert IE beim Layout eines leeren SVG-Elements ein?
Ich stoße derzeit auf ein Problem in IE 10 und 11, wo die Browser-Registerkarte hin und wieder auf dem Layout im UI Responsiveness-Tool auftaucht. Ich bin Teil eines Teams, das eine ziemlich große knockout.js Web-App schreibt, also war es extrem schwierig, den genauen Zustand festzustellen, der dieses Problem verursacht. Von dem, was ich sagen kann, hängt die Browser-Registerkarte, wenn Layout ausgeführt wird, wenn das Entfernen von Ladeanzeige HTML von der Seite entfernt wird und einige divs sowie ein leeres SVG-Tag an das DOM an dessen Stelle angehängt wird.
Ich konnte feststellen, dass das leere SVG-Tag der Schuldige ist, aber ich weiß nicht warum und ich kann dieses Tag nicht von der Seite entfernen, weil es ein wichtiges Element für ein D # ist. Datenvisualisierung, die ich versuche zu erstellen.
Hier ist der US-Responsiveness-Bericht, den IE 11 mir zur Verfügung gestellt hat. Ich habe den problematischen Bereich vergrößert, und wie Sie auf dem Bild sehen können, spiked der Layout-Thread die CPU auf 100%.
Bevor ich in die Codebeispiele komme, lautet meine Frage:
Warum sollte die Browser-Registerkarte beim Hinzufügen eines leeren SVG-Elements zur Seite zeitweise hängen bleiben / hängen bleiben?
Der HTML-Code wird über Javascript an das DOM angehängt, und zwar so minimal wie möglich von meinen Forschungen zur Reduzierung des Reflow im Browser:
%Vor%Dies ergibt den folgenden HTML-Code (Anmerkung: das gesamte Datenbindungskram ist für binding-Handler von knockout.js bestimmt, was das obige JS auslöst):
%Vor%Schließlich verwende ich auch flexbox CSS-Regeln, um mein HTML auszulegen. Ich bin nicht sicher, ob das das Problem betrifft, aber hier ist das CSS, falls es hilft:
%Vor%Danke für Ihre Hilfe. Ich bin nicht sicher, wie man das festnagelt, ist es intermittierend in einem Abschnitt unserer App und unsere Codebasis ist ziemlich groß, um herauszufinden, die genaue Kombination von Code in anderen Dateien, die auch zu diesem Problem beitragen können.
4 Antworten
Die Art und Weise, wie ich dieses Problem letztendlich behoben habe, bestand darin, die Verwendung von display:flex für das Element .chart zu entfernen. An seiner Stelle verwendete ich eine feste Höhe und display:block . Es sieht so aus, als wäre dies letztendlich ein Fehler beim IE, wenn SVG und Flexbox zusammengemischt werden.
Das beschriebene Problem scheint dieser Fehler zu sein: Ссылка
In den Kommentaren ist ein Workaround beschrieben, der zumindest für uns funktioniert hat:
Sie müssen style="pointer-events: none;" für die verwendeten Elemente festlegen.
Oder füge das einfach zu deinem CSS hinzu:
Beachten Sie jedoch, dass dies auch alle Mausereignisse deaktiviert, die auf dem use-Element ausgelöst werden.
Nach vielen Tagen der Suche habe ich mich entschieden, das Problem zu lösen, indem ich folgendes anspreche:
%Vor%Tags und Links internet-explorer css svg internet-explorer-10 internet-explorer-11