Safari SVG Sprite Bug fixed

Der Safari SVG Sprite Bug, der mich nun ein paar Wochen verfolgt hat, ist gefixt. Schnell nach bekannt werden des Bugs hatte sich Antti Koivisto der Sache angenommen und einen Fix gebaut, der in den aktuellen Updates von iOS (9.3.2) und Safari für OS X 9.1.1 (11601.6.17) landete, beide Updates sind seit Montag erhältlich. Besucht man mit leerem Cache nun eine Seite mit SVG-Sprite, wird dieses gecached und nicht so oft geladen, wie Icons aus dem Sprite auf der Seite verwendet werden.

safari-svg-sprite-bug-fixed

Notlösung zurückbauen

Es wird wahrscheinlich noch ein wenig dauern, bis wir unsere Notlösung zumindest teilweise wieder zurückbauen können, je nachdem wie schnell sich der Fix verbreitet, da die Seiten aber trotz Bug ja grundsätzlich funktionsfähig bleiben, wird man damit nicht allzu lange warten brauchen. Da wir doch einen sehr fehleranfälligen und komplizierten Herstellungsprozess für die SVG-Sprites hatten, bin ich mir sicher, das wir exakt diesen nicht wieder implementieren werden.

Hektisches Geteste führt zu nüscht…

Gestern habe ich versucht, nach der Rückkehr aus dem Urlaub, mal schnell die Updates zu ziehen und zwischen zwei Terminen den Fix, der mir schon von verschiedenen zugetweetet worden war und die ich schon retweetet hatte.

Um es kurz zu machen, Safari verhält sich beim sogenannten hard reloaden (Tastenkombi CMD-SHIFT-R) immer noch anders als vielleicht Chrome oder Firefox, und lädt in diesem Fall das Sprite mehrmals herunter, aber im Grunde ist das nur richtig, by the word Reload page without cache, also es wird tatsächlich nichts gecached. Das hatte mich ehrlich gesagt zunächst etwas durcheinandergebracht.

Und die Moral von der Geschichte

Ich habe ein paar Dinge gelernt, bei der Sache:

  • Find’s Du einen Bug, brauchst Du einen Testcase… ich hatte im Laufe der Zeit mehrere, einigermaßen brauchbar ist wohl erst der Aktuellste gewesen
  • Hast Du einen Testcase, lass ihn von vielen testen (hat super funktioniert
  • Willst Du einen Bug in Safari gefixt haben, mach Dir nicht die Mühe bei Apple direkt zu fragen, sondern geh ins Webkit-Bugboard
  • Ist ein Bug im Bugboard, einfach mal nachfragen, wann er denn gefixt wird
  • Wenn dann der Fix da ist, Zeit nehmen, ihn zu testen
  • Zeit nutzen um alternative Ansätze zu entwickeln

Safari SVG Sprite Bug?

Update: Der hier besprochene Bug wurde inzwischen gefixt.

Ich hatte es schon getweetet, aber es liegt mir doch sehr auf der Seele, deswegen nochmal ausführlich hier…

Vor ein paar Tagen haben unsere Backend-Kollegen einen starken Anstieg an Downloads einer bestimmte Datei unserer Website festgestellt, nämlich jener SVG-Datei, in der unsere SVG-Sprites abgelegt sind. Die Datei wurde mit einem Male so exorbitant oft heruntergeladen, dass es in den Logs auffiel. Zunächst gingen wir natürlich von einem Fehler unsererseits aus, auffällig war allerdings von Anfang an, dass nur Safaribrowser (Desktop, vor allem aber Mobile) ab Version 9 die vielen Downloads verursachten.

Meiner Meinung nach haben wir es mit einem Bug in Safari zu tun. Und seit nun schon ein paar Tagen bin ich auf der Suche nach diesem Bug. Ich habe einen Testcase gebaut (um Knnfigurations- und Serverfehler zu vermeiden auf einem anderen Server), mit dem man das Problem nachvollziehen kann. Und nachdem ich nach langer langer Recherche sprichwörtlich nichts darüber im Netz finden konnte, habe ich einen Bug bei Apple eingetütet und ein Issue bei svg4everybody erstellt, dort wird die betroffene Technik ausgiebig genutzt, die sollten sich dafür interessieren. Bisher gab es keine Reaktionen.

svguse

Was ist denn das Problem?

Wir nutzen eine externe SVG-Spritemap. Darin befinden sich alle Icons und Logos, und braucht man ein Icon, wird es auf diese Weise in den Code eingebunden:

<svg class="svg-symbol logo_bar__brand-logo" role="img" aria-labelledby="title">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#svg-logo-zon-black"></use>
</svg>

Das geht natürlich nur in modernen Browsern, deswegen nutzen wir svg4everybody um das ganze für ältere Browser zu polyfillen, was aber keinen Einfluss auf den Bug hat. Auf einer Artikelseite mit Kommentaren, können so bis zu 30 Icons auf einer Seite auftauchen. In Chrome, Firefox und anderen wird das Sprite genau einmal geladen pro Seitenaufruf und dann natürlich gecached. In Safaris > 9 (unter iOS 9.3.1 oder auf dem Desktop 9.1.1) wird die SVG-Datei einmal pro angezeigtem Icon heruntergeladen, was ein sehr hohes Datenaufkommen verursachen kann (siehe oben). Uns fällt sowas in den Logs auf, Nutzer von mobile Safari spüren es womöglich auf ihrer Telefonrechnung.

Was bedeutet das?

Einfach gesagt: das Netz ist sowas von kaputt… man braucht keine leftpadding-Funktion via npm einzubauen, um eine Website kaputt zu machen. Allein schon ein Browserupdate kann einen in Teufels Küche bringen. Kann natürlich immer noch sein, dass der Fehler bei mir liegt (und ja, die Datei ist viel zu groß, da kann man ansetzen), vielleicht findet ja einer meiner Leser etwas… Mich beschleicht aber auch irgendwie das Gefühl, dass Apple SVG nicht so richtig im Safari haben will.

Für uns bedeutet das letztlich, dass wir unsere Art der SVG-Einbindung nochmal komplett überarbeiten müssen, wir wollen ja nicht noch mehr Daten ausliefern, als wir sowieso schon tun…

Update: Martin Wolf hat den Screencast zum Bug gedreht.