Webkit SVG Height Bug
0 
molily
Webkit SVG Height Bug
Hallo werte Selfgemeinde!
Folgende Frage:
Apple Webkit basierte Browser haben, bzw. hatten früher einen Bug im Bezug auf die Höhe von SVG Elementen - siehe u.a.: https://bugs.webkit.org/show_bug.cgi?id=82489
Auf dem einzigen Apple Gerät, was mir zur Verfügung steht, einem iPad Mini mit iOS 7 scheint es diesen Bug aber nicht mehr zu geben. Weder im Chrome, noch im Safari.
Die letzte Windows Desktop Version von Safari (5.1.7) weist diesen Bug jedoch definitiv auf.
Ich binde die externen SVG Dateien per <object> ein.
Kann mir jemand bitte sagen, welche Versionen (Chrome/ Safari) noch von diesem Bug betroffen sind, bzw. ab welchen Versionen dieser "behoben" ist?
Per Google konnte ich leider keine verlässlichen Angaben finden.
Besten Dank im Voraus!
Gruß Gunther
-
Hallo,
Apple Webkit basierte Browser haben, bzw. hatten früher einen Bug im Bezug auf die Höhe von SVG Elementen - siehe u.a.: https://bugs.webkit.org/show_bug.cgi?id=82489
Das Beispiel zum Reproduzieren dieses Bugs zeigt mir, dass der Fehler immer noch im Chrome 31 und Safari 7.0.1 unter Mac existiert. Das SVG-Element ist unglaublich hoch, weil die intrinsische Größe von 200 nicht berücksichtigt wird. Korrekt wird es in Firefox dargestellt. Im IE 11 wird anscheinend eine Standardhöhe von 150 angenommen.
Ich binde die externen SVG Dateien per <object> ein.
Das hat zumindest nichts mit dem Bugreport zu tun. Dieser betrifft svg-Elemente direkt im HTML-DOM. Wie sich Browser bei object verhalten, weiß ich nicht.
Offenbar ist es sinnvoll, svg-Elementen und auch object-Elementen, die SVG-Grafiken einbinden, eine feste width und height zu geben.
Mathias
-
Hallo Mathias!
Apple Webkit basierte Browser haben, bzw. hatten früher einen Bug im Bezug auf die Höhe von SVG Elementen - siehe u.a.: https://bugs.webkit.org/show_bug.cgi?id=82489
Das Beispiel zum Reproduzieren dieses Bugs zeigt mir, dass der Fehler immer noch im Chrome 31 und Safari 7.0.1 unter Mac existiert. Das SVG-Element ist unglaublich hoch, weil die intrinsische Größe von 200 nicht berücksichtigt wird. Korrekt wird es in Firefox dargestellt. Im IE 11 wird anscheinend eine Standardhöhe von 150 angenommen.
Ja, gleiches Bild unter Windows.
Der IE scheint das 'max-height: 100%' automatisch anzuwenden (Browser Stylesheet?). Wobei mir dabei auch immer noch unklar ist, wieso bei einer Width von 200px max-height 150 ergibt!?Ich binde die externen SVG Dateien per <object> ein.
Das hat zumindest nichts mit dem Bugreport zu tun. Dieser betrifft svg-Elemente direkt im HTML-DOM. Wie sich Browser bei object verhalten, weiß ich nicht.
Ja, erwischt. ;-)
Das hat aber indirekt schon auch mit diesem Bug zu tun. Normalerweise sollte ein Browser eine per Object eingebundene SVG Datei "automatisch" an die Größe des Parent Elements anpassen (width und height für object = 100%).Aktuell machen das auch alle von mir getesteten Browser "richtig", mit Ausnahme des (alten) Safari (5.1.7 Win).
Hier *muss* das Container-Element zusätzlich eine explizite Angabe für Height haben, damit das Container-Element die korrekte Höhe hat (ansonsten beträgt diese 100%).
Also lass' mich meine Frage dahingehend abändern, dass ich gerne gewusst hätte, bis zu welcher Version Webkit Browser dieses Verhalten an den Tag legen?
Offenbar ist es sinnvoll, svg-Elementen und auch object-Elementen, die SVG-Grafiken einbinden, eine feste width und height zu geben.
Nein, denn genau dann geht ja der entscheidende Vorteil der automatischen Skalierung verloren.
Der Workaround besteht in einer einfachen Javascript Lösung, die basierend auf der Aspect Ratio den jeweiligen Elementen zusätzlich eine feste Height Angabe zuweist.
Aber ich wüßte halt gerne, für welche Browser das von Nöten ist und für welche nicht.Gruß Gunther
-