SafariデスクトップのSVGコンテナのサイズが間違っています（Chrome/iOSでは問題ありません）

Question

Safariがこれをソートしていたと思いますが、明らかに問題がないようです。

私はオブジェクトタグの内側にSVGを配置しています。これは、DIVを含む可撓性（例えば幅50％に設定されている）で包まれている。サイズを変更すると、Firefox、Chrome、Operaでコンテナの高さが変更されますが、Safariではコンテナの高さが高すぎます。ここで

はSafariではっきりと効果を確認するために（右ボタンの下）フルサイズの結果または「側エディタ」に切り替え、実証するCodepenの例です：http://codepen.io/benfrain/full/fhyrD

にSVGのサイズを変更するJSを使用してほかにロード/サイズ変更、Safariを正しく動作させるために他に何かがあるかどうかを知っていますか？私はこれを数週間前に考え出したのですが、今私は再びこの問題にぶつかっているようです。

Answer 1

だから、SérgioLopezが答えました。 Thierry Koblentzがここで説明したビデオ技法の内在比を使用することができます：http://alistapart.com/article/creating-intrinsic-ratios-for-video。このブログ記事ではより多くの情報：オブジェクトタグSVG用

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

そして、これを取り巻く

内側：

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

http://benfra.in/20l

ここでは、あなたのCSSに必要なカットアンドペーストコードがあります