iOS / Mac Safari で display: flex の中の svg が表示されない

Question

display: flex を指定した <div> の子要素に <svg> を入れると Safari だけ表示されません。
親要素として display: block を追加すると表示されるのですが余計な要素を増やしたくありません。
他に対応方法はないでしょうか？

Chrome は問題なく表示されます。

左側が Safari、右が Chrome です。

サンプルコードです。
https://codepen.io/sygnas/pen/MWOZQdO

Answer 1

Safari のバグなのでしょうが、<svg> に width="100%" を入れると直るようです。

Comments

[dada-sygnas]

ありがとうございます！
この方法知りませんでした。

width:100% だけだと上下に謎の余白ができたのですが、
height: 100% も追加したら治りました。

しかしこの例は正円なので簡単ですが、場合によっては難しそうですね。