SVG-Container rendert falsche Größe in Safari-Desktop (gut in Chrome/iOS)

Question

Ich dachte, Safari hatte dies sortiert, aber es scheint immer noch ein Problem (es sei denn, ich mache etwas offensichtlich falsch).

Ich habe ein SVG in einem Objekt-Tag platziert. Das ist in einem flexiblen enthaltenden DIV (z.B. mit einer Breite von 50%) verpackt. Bei der Größenänderung wird die Containerhöhe in Firefox, Chrome und Opera so geändert, wie ich es erwarten würde, aber auf Safari bleibt der Container zu hoch.

Hier ist ein Beispiel auf Codepen zu demonstrieren, Schalter auf das volle Größe Ergebnis oder ‚Editor auf der Seite‘ (Button unten rechts), um den Effekt deutlich in Safari zu sehen: http://codepen.io/benfrain/full/fhyrD

Neben JS mit der SVG auf, um die Größe load/resize, weiß jemand, ob ich noch etwas tun kann, damit sich Safari korrekt verhält? Könnte geschworen haben, dass ich das vor ein paar Wochen herausgefunden hatte, aber jetzt scheint ich das Thema wieder zu treffen.

Answer 1

Also hatte Sérgio Lopez eine Antwort dafür. Sie können das intrinsische Verhältnis für die Videotechnik verwenden, das Thierry Koblentz hier beschrieben hat: http://alistapart.com/article/creating-intrinsic-ratios-for-video. Mehr Informationen zu diesem Blog-Post: http://benfra.in/20l

Hier ist der Ausschneiden und Einfügen Code, den Sie in Ihrem CSS benötigen:

Umgebung Objekt-Tag

object { 
    width: 100%; 
    display: block; 
    height: auto; 
    position: relative; 
    padding-top: 100%; 
} 

Und dies für die SVG innen:

svg { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
}