Erinnern Sie sich an das letzte Mal, als Sie auf einen Fehler im Zusammenhang mit UI gesto?en sind, mit dem Sie mehrere Stunden am Kopf kratzten? M?glicherweise tritt das Problem zuf?llig oder in einer bestimmten Situation auf (Ger?t, Betriebssystem, Browser, Benutzerbetrieb) oder ist in einer der vielen Front-End-Technologien im Projekt nur versteckt?

Ich habe kürzlich wieder die Komplexit?t von UI -Bugs erlebt. Ich habe kürzlich einen interessanten Fehler behoben, der einige SVGs im Safari -Browser ohne offensichtliche Muster oder Grund beeinflusst hat. Ich habe nach ?hnlichen Fragen gesucht, in der Hoffnung, einige Hinweise zu finden, aber es wurden keine nützlichen Ergebnisse gefunden. Trotz der Hindernisse habe ich es geschafft, es zu beheben.

Ich analysiere das Problem, indem ich einige nützliche Debugging -Strategien verwende, die ich auch in diesem Artikel behandeln werde. Nachdem ich das Fix eingereicht hatte, erinnerte ich mich an einen Tweet, der von Chris früher gepostet wurde.

Schreiben Sie den Artikel auf, den Sie bei der Suche nach Google finden wollten.

- Chris Coyier (@chriscoyier) 30. Oktober 2017

… Wir sind hier.

Problembeschreibung

Ich fand den folgenden Fehler in einem laufenden Projekt. Dies ist auf einer Website, die online ist.

Ich habe ein CodePen -Beispiel erstellt, um dieses Problem zu demonstrieren, damit Sie es selbst überprüfen k?nnen. Wenn wir das Beispiel in Safari ?ffnen, kann die Taste beim Laden wie erwartet aussehen. Wenn wir jedoch auf die ersten beiden gr??eren Schaltfl?chen klicken, wird das Problem angezeigt.

Immer wenn ein Browser -Ereignis auftritt , ist das SVG -Rendering in der gr??eren Taste falsch . Es ist nur abgeschnitten. Es kann zuf?llig beim Laden passieren. Es kann sogar passieren, wenn der Bildschirm ge?ndert wird. Egal wie die Situation ist, es wird passieren!

Hier ist meine L?sung für dieses Problem.

Betrachten wir zun?chst die Umwelt

Es ist immer eine gute Idee, die Details des Projekts zu überprüfen, um die Umgebung und die Bedingungen für Fehler zu verstehen.

• Dieses bestimmte Projekt verwendet React (aber dieser Beitrag erfordert es nicht).
• SVG wird als React -Komponente importiert und über WebPack in HTML eingefügt.
• SVG wird aus Design -Tools exportiert und hat keine Syntaxfehler.
• SVG wendet einige CSS von Stylesheets an.
• Die betroffene SVG befindet sich in einem HTML<div> Im Element.<li> Das Problem tritt nur in Safari auf (in Version 13 angegeben).</li> <h3 id="Eingehende-Frage"> Eingehende Frage</h3> <p> Schauen wir uns diese Frage an und sehen, ob wir einige Annahmen darüber treffen k?nnen, was vor sich geht. Fehler wie diese k?nnen kompliziert werden und wir werden nicht sofort wissen, was los ist. Wir müssen beim ersten Versuch nicht zu 100% korrekt sein, da wir Schritt für Schritt gehen und Hypothesen bilden k?nnen, die wir testen k?nnen, um m?gliche Ursachen einzugrenzen.</p> <h3 id="Annahmen-bilden"> Annahmen bilden</h3> <p> Zuerst sieht dies wie ein CSS -Problem aus. Einige Stile k?nnen in schwebenden Ereignissen angewendet werden, wodurch die Layout- oder überlaufeigenschaften der SVG -Grafiken gebrochen werden. Es sieht auch so aus, als ob das Problem zuf?llig auftritt, wenn Safari eine Seite macht (Zeichnen von Ereignissen bei der Gr??e des Bildschirms, schwebenden, klicken usw.).</p> <p> Beginnen wir mit dem einfachen und offensichtlichsten Weg und nehmen an, dass CSS die Quelle des Problems ist. Wir k?nnen die M?glichkeit eines Fehlers im Safari -Browser berücksichtigen, der dazu führt, dass das SVG -Rendering falsch ist, wenn bestimmte Stile auf SVG -Elemente angewendet werden (z. B. Flex -Layout).</p> <p> Auf diese Weise <strong>bilden wir eine Hypothese</strong> . Unser n?chster Schritt besteht darin, einen Test einzurichten, der die Hypothese entweder best?tigt oder widerlegt. Jedes Testergebnis erzeugt neue Fakten über den Fehler und hilft, weitere Annahmen zu bilden.</p> <h3 id="Vereinfachen-Sie-das-Problem"> Vereinfachen Sie das Problem</h3> <p> Wir werden eine Debugging -Strategie verwenden, die als <strong>Problemvereinigung</strong> bezeichnet wird, um Probleme zu ermitteln. Cornells CS -Vorlesung beschrieb diese Strategie als "eine M?glichkeit, Teile des Codes, der nicht mit Fehler zusammenh?ngt, schrittweise zu beseitigen".</p> <p> Unter der Annahme, dass das Problem in CSS liegt, k?nnen wir schlie?lich das Problem bestimmen oder CSS aus der Gleichung beseitigen, wodurch die Anzahl m?glicher Ursachen und die Komplexit?t des Problems verringert werden.</p> <p> Versuchen wir, unsere Annahmen zu best?tigen. Wenn wir alle Nicht-Browser-Stylesheets vorübergehend ausschlie?en, sollte das Problem nicht auftreten. Ich mache dies in meinem Quellcode, indem ich die folgende Codezeile aus dem Projekt kommentiere.</p> <pre class="brush:php;toolbar:false"> &lt;code&gt;import 'css/app.css';&lt;/code&gt;</pre> <p> Ich habe ein praktisches CodePen -Beispiel erstellt, um diese Elemente zu demonstrieren, die kein CSS enthalten. In React importieren wir SVG -Grafiken als Komponenten und sie werden mit Webpack in HTML eingebaut.</p> <p> Wenn wir diesen Stift in Safari ?ffnen und auf die Schaltfl?che klicken, haben wir dieses Problem immer noch. Es geschieht immer noch, wenn die Seite geladen wird, aber auf CodePen müssen wir sie erzwingen, indem wir auf die Schaltfl?che klicken. Wir k?nnen zu dem Schluss kommen, dass CSS nicht der Schuldige ist, aber wir k?nnen auch sehen, dass in diesem Fall nur zwei der fünf Kn?pfe Probleme haben. Erinnern wir uns daran und gehen Sie mit der n?chsten Annahme weiter.</p> <h3 id="Isolationsprobleme"> Isolationsprobleme</h3> <p> Unsere n?chste Annahme besagt, dass Safari in HTML ist<code><div> Es gibt einen Fehler beim Rendern von SVG im Element. Da das Problem bei den ersten beiden Tasten auftritt, werden wir <strong>den ersten Knopf isolieren</strong> und sehen, was passiert.<p> Sarah Drasner erkl?rt die Bedeutung der Isolation. Wenn Sie mehr über Debugging -Tools und andere Methoden erfahren m?chten, empfehle ich dringend, ihren Artikel zu lesen.</p> <blockquote><p> Isolation ist wahrscheinlich das st?rkste Kernprinzip in allen Debuggen. Unsere Codebasis kann riesig sein, mit verschiedenen Bibliotheken, Frameworks und vielen Mitwirkenden, selbst Personen, die nicht mehr an dem Projekt beteiligt sind. Quarant?neprobleme helfen uns, unn?tige Teile langsam aus den Problemen zu entfernen, damit wir uns allein auf die L?sung konzentrieren k?nnen.</p></blockquote> <p> Es wird auch oft als "vereinfachtes Testfall" bezeichnet.</p> <p> Ich habe diese Schaltfl?che auf eine separate leere Teststrecke (leere Seite) verschoben. Ich habe den folgenden Codepen erstellt, um den Status zu demonstrieren. Selbst wenn wir zu dem Schluss gekommen sind, dass CSS nicht die Ursache des Problems ist, sollten wir den Fehler auch ausschlie?en, bevor wir die eigentliche Ursache des Fehlers herausfinden, um das Problem so weit wie m?glich zu vereinfachen.</p> <p> Wenn wir diesen Stift in Safari ?ffnen, k?nnen wir sehen, dass wir <strong>das Problem nicht mehr reproduzieren k?nnen</strong> und <strong>das SVG -Diagramm nach dem Klicken auf die Schaltfl?che wie erwartet anzeigt</strong> . <strong>Wir sollten diese ?nderung nicht als eine akzeptable Fehlerbehebung betrachten</strong> , sondern einen guten Ausgangspunkt für die Erstellung minimal reproduzierbarer Beispiele.</p> <h3 id="Minimal-reproduzierbares-Beispiel"> Minimal reproduzierbares Beispiel</h3> <p> Der Hauptunterschied zwischen den ersten beiden Beispielen ist die Button -Kombination. Nachdem wir alle m?glichen Kombinationen ausprobiert haben, k?nnen wir zu dem Schluss kommen, dass dieses Problem nur dann auftritt, wenn ein Zeichnungsereignis für ein gr??eres SVG -Diagramm neben einem kleineren SVG -Diagramm auf derselben Seite auftritt.</p> <p> Wir haben ein <strong>minimal reproduzierbares Beispiel</strong> erstellt, mit dem wir Fehler ohne unn?tige Elemente reproduzieren k?nnen. Unter Verwendung des kleinsten reproduzierbaren Beispiels k?nnen wir das Problem genauer untersuchen und genau den Teil des Codes genau bestimmen, der das Problem verursacht.</p> <p> Ich habe das folgende CodePen erstellt, um das kleinste reproduzierbare Beispiel zu demonstrieren.</p> <p> Wenn wir diese Demo in Safari ?ffnen und auf die Schaltfl?che klicken, k?nnen wir feststellen, dass das Problem auftritt und die Annahme bilden, dass die beiden SVGs irgendwie miteinander widersprechen. Wenn wir die zweite SVG -Abbildung in der ersten Abbildung überlagern, k?nnen wir sehen, dass die Gr??e des Kreislaufs in der ersten SVG -Abbildung der genauen Gr??e der kleineren SVG -Abbildung übereinstimmt.</p> <h3 id="Dividieren-und-behandeln"> Dividieren und behandeln</h3> <p> Wir haben das Problem auf eine Kombination von zwei SVG -Grafiken eingeschr?nkt. Jetzt werden wir das Problem auf den spezifischen SVG -Code eingrenzen, der das Problem verursacht. Wenn wir nur ein grundlegendes Verst?ndnis des SVG-Codes haben und das Problem genau bestimmen m?chten, k?nnen wir <strong>eine bin?re Baumsuchstrategie</strong> verwenden und einen Divide-and-Conquer-Ansatz verfolgen. Die CS -Vorlesung der Cornell University beschreibt diesen Ansatz:</p> <blockquote><p> Wenn Sie beispielsweise mit einem gro?en Code beginnen, legen Sie einen Kontrollpunkt in der Mitte des Codes. Wenn der Fehler zu diesem Zeitpunkt nicht auftritt, bedeutet dies, dass der Fehler in der zweiten H?lfte auftritt. Ansonsten ist es in der ersten H?lfte.</p></blockquote> <p> In SVG k?nnen wir versuchen, aus dem ersten SVG zu entfernen<code><filter></filter> (sowie<defs></defs> weil es sowieso leer ist). Lassen Sie uns zuerst überprüfen<filter></filter> Die Rolle dieses Artikels von Sara Soueidan erkl?rt es am besten.

  Wie lineare Gradienten, Masken, Muster und andere grafische Effekte in SVG verfügt der Filter über ein dediziertes Element, das bequem benannt ist:<filter></filter> Element.

  <filter></filter> Ein Element wird niemals direkt gerendert; Sein einziger Zweck ist es, es unter Verwendung des filter in SVG oder url() -Funktion in CSS zu verweisen.

  In unserem SVG,<filter></filter> Ein leichter innerer Schatten wird auf den Boden der SVG -Grafiken angewendet. Nachdem wir es aus dem ersten SVG -Diagramm entfernt haben, erwarten wir, dass der innere Schatten verschwindet. Wenn das Problem weiterhin besteht, k?nnen wir zu dem Schluss kommen, dass ein Problem mit dem Rest des SVG -Tags besteht. Wenn wir gehen von<g filter="url(#filter0_ii)"></g> L?schen Sie die verbleibenden IDs in und der Schatten wird vollst?ndig entfernt. Was ist los?

  Werfen wir einen Blick auf die oben genannten<filter></filter> Definition von Eigenschaften und achten Sie auf die folgenden Details:

  <filter></filter> Elemente werden niemals direkt gerendert; Der einzige Zweck ist zu referenzieren unter Verwendung filter in SVG.

  (Meine Betonung)

  Daher k?nnen wir zu dem Schluss kommen, dass die Filterdefinition des zweiten SVG -Diagramms auf das erste SVG -Diagramm angewendet wird und zu einem Fehler führt.

  Das Problem beheben

  Wir kennen jetzt das Problem und<filter></filter> Eigenschaften verwandt. Wir wissen auch, dass beide SVGs filter haben, da sie es verwenden, um innere Schatten in Kreisen zu erstellen. Vergleichen wir den Code zwischen diesen beiden SVGs und prüfen wir, ob wir dies erkl?ren und beheben k?nnen.

  Ich habe den Code für beide SVG -Grafiken vereinfacht, damit wir klar sehen k?nnen, was los ist. Der folgende Code -Snippet zeigt den Code für den ersten SVG an.

  <code><svg height="46" viewbox="0 0 46 46" width="46"><g filter="url(#filter0_ii)"></g><defs><filter height="46" width="46" x="0" y="0"></filter></defs></svg></code>

  Der folgende Code -Snippet zeigt den Code für das zweite SVG -Diagramm an.

  <code><svg height="28" viewbox="0 0 28 28" width="28"><g filter="url(#filter0_ii)"></g><defs><filter height="28" width="28" x="0" y="0"></filter></defs></svg></code>

  Wir k?nnen feststellen, dass der generierte SVG dieselbe ID -Attribut id=filter0_ii verwendet. Safari wendet die Filterdefinition an, die zuletzt liest (in diesem Fall der zweite SVG -Marker) und bewirkt, dass die erste SVG auf die Gr??e des zweiten Filters (von 46 px bis 28px) geschnitten wird. Das ID -Attribut sollte im DOM einen eindeutigen Wert haben. Durch zwei oder mehr ID -Eigenschaften auf einer Seite kann der Browser nicht verstehen, welche Referenz angewendet werden soll, und die Filtereigenschaften werden in jedem Ziehereignis abh?ngig von den Rennbedingungen neu definiert, die dazu führen, dass das Problem zuf?llig erscheint.

  Versuchen wir, jedem SVG -Diagramm einen eindeutigen ID -Attributwert zuzuweisen, um festzustellen, ob dies das Problem l?st.

  Wenn wir das CodePen -Beispiel in Safari ?ffnen und auf die Schaltfl?che klicken, k?nnen wir dies sehen, indem wir es in jeder SVG -Graphendatei erstellen<filter></filter> Attribute weisen eindeutige IDs zu, wir haben dieses Problem behoben . Wenn wir die Tatsache betrachten, dass wir nicht eindeutige Werte für Eigenschaften wie ID haben, bedeutet dies, dass dieses Problem auf allen Browsern vorhanden sein sollte . Aus irgendeinem Grund scheinen andere Browser (einschlie?lich Chrom und Firefox) mit diesem Randfall ohne Fehler zu handhaben, obwohl dies nur ein Zufall sein kann.

  Zusammenfassen

  Dies ist eine ziemlich lange Reise! Wir ignorieren fast ein scheinbar zuf?lliges Problem zum vollst?ndigen Verst?ndnis und Beheben. Das Debugieren der Benutzeroberfl?che und das Verst?ndnis visueller Fehler kann schwierig sein, wenn die Ursache des Problems unklar oder komplex ist. Glücklicherweise k?nnen uns einige nützliche Debugging -Strategien helfen.

  Erstens vereinfachen wir das Problem, indem wir Annahmen erstellen , die uns helfen, die Komponenten (Stile, Tags, dynamische Ereignisse usw.) zu beseitigen, die nicht mit dem Problem zusammenh?ngen. Danach isolierten wir das Markup und fanden das kleinste reproduzierbare Beispiel, das es uns erm?glichte, uns auf einen einzelnen Codeblock zu konzentrieren. Schlie?lich verwendeten wir eine Kluft- und Eroberungsstrategie, um das Problem zu bestimmen und zu beheben.

  Vielen Dank, dass Sie sich die Zeit genommen haben, diesen Artikel zu lesen. Bevor ich gehe, m?chte ich Sie mit einer letzten Debugging -Strategie verlassen, die auch in Cornells CS -Vorlesung behandelt wird.

  Denken Sie daran , eine Pause zwischen Debugging -Versuchen zu machen, sich zu entspannen und Ihre Gedanken aufzur?umen .

  Wenn Sie zu viel Zeit mit Fehler verbringen, fühlen sich Programmierer müde und debuggen k?nnen nach hinten losgehen. Machen Sie eine Pause und r?umen Sie Ihre Gedanken auf; Versuchen Sie nach Ruhe, aus einer anderen Perspektive darüber nachzudenken.

  beziehen sich auf

  • Cornell University CS 312 Vorlesung 26 - Debug -Technologie
  • Tipps und Tipps Debugging
  • Vereinfachte Testf?lle
  • SVG -Filter 101